Ssr webpack #937

NataliaTepluhina · 2021-03-10T17:21:45Z

Description of Problem

This is a draft for SSR documentation with a build step

Deployed demo here: https://deploy-preview-937--vue-docs-next-preview.netlify.app/guide/ssr/introduction.html

Close #533
Close #726

src/guide/ssr/build-config.md

NataliaTepluhina · 2021-03-18T19:08:56Z

@skirtles-code @danielroe would you mind checking this draft? It's very raw so far, any suggestions/improvements are much appreciated! 🙇🏻‍♀️

danielroe

This is looking great! I've made a few comments for your consideration.

There is also some legacy ES5 syntax in getting started that was untouched by this PR - it may be worth just making sure everything is consistent across the examples.

src/guide/ssr/build-config.md

src/guide/ssr/getting-started.md

src/guide/ssr/hydration.md

src/guide/ssr/structure.md

skirtles-code

I haven't tried running the code examples myself yet but I've had a read through and made some suggestions.

I feel that Vue CLI could do more to facilitate this. Relying on a big chunk of webpack configuration in the SSR docs doesn't seem very maintainable. But we are where we are for now...

I should really spend some time learning webpack properly. I can muddle my way through but I don't really have the knowledge required to make good suggestions at the moment.

src/guide/ssr/build-config.md

src/guide/ssr/structure.md

src/guide/ssr/universal.md

Co-authored-by: Daniel Roe <[email protected]>

NataliaTepluhina · 2021-03-27T13:55:37Z

@CyberAP I would be really happy if you could take a look too 🙏🏻 I believe your input on SSR is super valuable

src/guide/ssr/build-config.md

CyberAP · 2021-03-27T14:12:18Z

src/guide/ssr/build-config.md

+const webpack = require('webpack')
+
+module.exports = {
+  chainWebpack: webpackConfig => {


I was thinking whether it is a good idea or not to have 3 configs here?
One for common rules likes aliases, one for client only and one for server only. Both of them deriving from the base config (using webpackMerge).

The reasoning behind this is that using chainWebpack for re-configuration is hardly maintainable. It does get very complex extremely fast so noone wants to touch this config because noone understands what happens here. I have the same setup on my project and it overwrites a ton of rules exactly like shown here: replacements\deletions inside if statements which depend on environment. I think a static webpack config is way more readable because you can understand what it does at the first glance just by the structure of that config (given you have an experience with webpack). This programmatic config is hard to read because you have to parse it line by line working as an interpreter. It is also unclear what the base vue-cli config looks like, so all the delete calls look like magic to me.

I agree with the point but I have a few questions regarding it:

should we move away from Vue CLI in this case? I am not sure how it's done correctly in the CLI environment as I usually always went with configureWebpack / chainWebpack in the `vue.config.js

Added a follow-up to refactor to CLI agnostic build with a base, server and client configs: #969

Yeah, this is probably not feasible with current vue-cli API, so it should be a part of vue-cli agnostic build in that case.

src/guide/ssr/build-config.md

src/guide/ssr/universal.md

CyberAP · 2021-03-27T14:25:53Z

src/guide/ssr/universal.md

+
+Most [custom directives](/guide/custom-directive.html#custom-directives) directly manipulate the DOM, which will cause errors during SSR. There are two ways to work around this:
+
+1. Prefer using components as the abstraction mechanism and work at the Virtual-DOM level (e.g. using [render functions](/guide/render-function.html#the-dom-tree)) instead.


I think the idea here is to replace directives with components as much as possible, but that exact wording is a bit unclear to me unfortunately. It is also unclear how render functions could help me in that case (an example would be much welcomed I think).

Rephrased a bit and removed a second point (see below)

CyberAP · 2021-03-27T14:34:31Z

src/guide/ssr/getting-started.md

@@ -64,6 +64,8 @@ yarn add express
 ```

 ```js
+// server.js


Since most of the people who want to migrate from CSR to SSR would be having some kind of main.js entry file maybe it would make sense to show this migration path as a step-by-step guide how we extract our current code from main.js and split it into three different files: app.js, entry-client.js and entry-server.js. The current approach is also very good, but I think it's more focused on writing an SSR app from scracth. Maybe there should be a separate guide for migrating from CSR to SSR? What do you think?

Agreed, it would be a great improvement! Created a follow-up: #970

src/guide/ssr/routing.md

CyberAP · 2021-03-27T14:37:48Z

src/guide/ssr/routing.md

+
+const isServer = typeof window === 'undefined'
+
+const history = isServer ? createMemoryHistory() : createWebHistory()


I think a slightly better approach here would be to pass the history instance on an entry-level, so we have better code-splitting here and won't have to check for isServer flag.

CyberAP · 2021-03-27T14:39:54Z

src/guide/ssr/hydration.md

+
+In development mode, Vue will assert the client-side generated virtual DOM tree matches the DOM structure rendered from the server. If there is a mismatch, it will bail hydration, discard existing DOM and render from scratch. There will be a warning in the browser console but your site will still work.
+
+However, in production mode, this assertion is disabled for maximum performance, which means that **it is crucial you ensure your client- and server-side DOM trees match**. Otherwise your HTML will remain static and non-reactive.


I am not sure about this one, does it really fail completely on hydration mismatch? I am not able to test this right now, but I remember that hydration algorithm in Vue 3 was significantly improved so the app doesn't crash completely in case of a mismatch.

Good point. I'd need to check this too.

@CyberAP I still can see a warning in the console for this but in prod mode, it's the same as in dev: app just renders from scratch without crashing 👍🏻 I'll unify both paragraphs removing a distinction for modes

CyberAP · 2021-03-27T14:41:55Z

src/guide/ssr/routing.md

@@ -0,0 +1,121 @@
+# Routing and Code-Splitting


As an SSR app developer I am also curious how Critical CSS should be implemeneted correctly with this approach.

I agree! However, this guide is not full and there are a few missing parts here. Here is an issue with 'what's currently missing': #971

Co-authored-by: Stanislav Lashmanov <[email protected]>

CyberAP · 2021-03-27T18:41:41Z

I am also curious whether something about vue-meta integration has changed. In Vue 2 it was important for meta config to be defined only on route config or on a page-level component (a component that can be retrieved from the route config).

Vue 3 also has an improved rendering mechanism which allows for a much flexible data fetching. Previously you had to declare your data fetching hooks on a page-level component which significantly limited component composition and data flow. In Vue 3 we have async setup and Suspense that remove that limitation. I think that might also be important to cover.

And I think in general it is important to cover a topic of data fetching and data transfer from server to client. Where to store that data (the most common solution here is to use Vuex), how to transfer that data (from naive JSON.stringify approach to more complex ones that support complex object types), how to hydrate that data so the hook that fetched the data on server doesn't trigger on client (usually done by checking hydration state in created hook via vnode.elm presence).

Lastly, there's a renderToStream method in vue server-render package. It produces a lower time to first byte and can increase lighthouse metrics. But it also imposes some restrictions on how you should write your code: no synchronous Teleports (can not replace the markup that has already been sent) or async meta configs (or at least we should wait for the meta to resolve before sending any data, since head tag goes first).

…pack

NataliaTepluhina · 2021-03-28T09:53:52Z

@CyberAP thank you so much for the great comments! I addressed 'smaller' ones and created follow-ups for the bigger refactorings 👍🏻 Please feel free to add more points here or to follow-up issues, your input is much appreciated

skirtles-code

A few more suggestions from me.

skirtles-code · 2021-03-30T07:47:26Z

src/guide/ssr/structure.md

+│   ├── MyUser.vue
+│   └── MyTable.vue
+├── App.vue
+├── app.js # universal entry


I'm wondering whether we should rename app.js to main.js? The Vite SSR example calls it main.js and it would help to avoid any confusion between this file and the app.js files created by the build.

I would argue here that with SSR we lose the idea of a single entry point file which was main.js for CSR and switch to a more generic app.js. Then we can launch our app in different environments if it's written in a universal style.

src/guide/ssr/structure.md

src/guide/ssr/build-config.md

src/guide/ssr/server.md

src/guide/ssr/routing.md

Co-authored-by: skirtle <[email protected]>

…pack

NataliaTepluhina · 2021-03-31T08:53:59Z

@skirtles-code I've addressed your comments, could you please check again?

skirtles-code

Last couple of small changes from me and then I think we're good to merge.

src/guide/ssr/routing.md

Co-authored-by: skirtle <[email protected]>

NataliaTepluhina · 2021-04-05T10:35:16Z

Thanks to everyone who was reviewing this monster! 🙌🏻 I am merging this one and then we'll iterate to shape it through the follow up issues

iGiliy · 2021-04-06T09:07:02Z

Excuse me, How to use asyncData in SSR?

iGiliy · 2021-04-06T09:12:42Z

Excuse me, How to use asyncData in SSR?

I tried to use suspense, but is an experimental feature and its API will likely change.

NataliaTepluhina added 10 commits March 3, 2021 17:18

feat: added universal code

f38249d

Added a project structure entry

42f211c

feat: added a router guide

3d6ec0d

fix: fixed entries and app

3d6097d

fix: fixed routing

d543e7d

chore: formatted the code

6cfeac5

fix: fixed structure and router

5646123

feat: added hydration guide

d12048e

feat: added basic configuration

a50d49e

feat: added sidebar config

59346d4

NataliaTepluhina commented Mar 18, 2021

View reviewed changes

src/guide/ssr/build-config.md Show resolved Hide resolved

NataliaTepluhina requested review from skirtles-code and danielroe March 18, 2021 19:09

danielroe reviewed Mar 20, 2021

View reviewed changes

skirtles-code suggested changes Mar 21, 2021

View reviewed changes

NataliaTepluhina and others added 14 commits March 22, 2021 18:04

Update src/guide/ssr/build-config.md

053eb04

Co-authored-by: Daniel Roe <[email protected]>

Update src/guide/ssr/getting-started.md

3fde0f8

Co-authored-by: Daniel Roe <[email protected]>

Update src/guide/ssr/hydration.md

8c19e79

Co-authored-by: Daniel Roe <[email protected]>

Update src/guide/ssr/hydration.md

e20873c

Co-authored-by: Daniel Roe <[email protected]>

Update src/guide/ssr/hydration.md

0942c46

Co-authored-by: Daniel Roe <[email protected]>

Update src/guide/ssr/routing.md

e0d5218

Co-authored-by: Daniel Roe <[email protected]>

Update src/guide/ssr/structure.md

32a16fd

Co-authored-by: Daniel Roe <[email protected]>

Update src/guide/ssr/routing.md

dfe68d1

Co-authored-by: Daniel Roe <[email protected]>

Update src/guide/ssr/routing.md

d58ff69

Co-authored-by: Daniel Roe <[email protected]>

Update src/guide/ssr/routing.md

d984a3e

Co-authored-by: Daniel Roe <[email protected]>

Update src/guide/ssr/routing.md

1667317

Co-authored-by: Daniel Roe <[email protected]>

Update src/guide/ssr/structure.md

2ffe6d5

Co-authored-by: Daniel Roe <[email protected]>

Update src/guide/ssr/structure.md

b96d6b4

Co-authored-by: Daniel Roe <[email protected]>

Update src/guide/ssr/structure.md

60d284d

Co-authored-by: Daniel Roe <[email protected]>

CyberAP reviewed Mar 27, 2021

View reviewed changes

Update src/guide/ssr/build-config.md

feebe1b

Co-authored-by: Stanislav Lashmanov <[email protected]>

NataliaTepluhina added 5 commits March 28, 2021 11:01

fix: remove hmr

d395ce1

Merge branch 'ssr-webpack' of github.com:vuejs/docs-next into ssr-web…

ad13a9d

…pack

fix: simplified reading file

fb69cfd

fix: rephrased caveats

1de777e

fix: removed custom directives mention

24a1646

skirtles-code suggested changes Mar 30, 2021

View reviewed changes

NataliaTepluhina and others added 9 commits March 31, 2021 11:27

Update src/guide/ssr/server.md

b306b9e

Co-authored-by: skirtle <[email protected]>

Update src/guide/ssr/server.md

609a346

Co-authored-by: skirtle <[email protected]>

Update src/guide/ssr/server.md

4a8c921

Co-authored-by: skirtle <[email protected]>

Update src/guide/ssr/server.md

2c54e8a

Co-authored-by: skirtle <[email protected]>

Update src/guide/ssr/server.md

7deaa4c

Co-authored-by: skirtle <[email protected]>

fix: fixed server code

5668010

Merge branch 'ssr-webpack' of github.com:vuejs/docs-next into ssr-web…

32b1b4c

…pack

fix: fixed build script

999f518

fix: fixed router async

ff5420e

NataliaTepluhina requested a review from skirtles-code March 31, 2021 08:54

skirtles-code approved these changes Apr 5, 2021

View reviewed changes

src/guide/ssr/routing.md Outdated Show resolved Hide resolved

src/guide/ssr/routing.md Outdated Show resolved Hide resolved

NataliaTepluhina and others added 2 commits April 5, 2021 13:34

Update src/guide/ssr/routing.md

c0361c4

Co-authored-by: skirtle <[email protected]>

Update src/guide/ssr/routing.md

1fdfa5e

Co-authored-by: skirtle <[email protected]>

NataliaTepluhina merged commit 88c61cb into master Apr 5, 2021

NataliaTepluhina deleted the ssr-webpack branch April 5, 2021 10:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ssr webpack #937

Ssr webpack #937

NataliaTepluhina commented Mar 10, 2021 •

edited

Loading

NataliaTepluhina commented Mar 18, 2021

danielroe left a comment

skirtles-code left a comment

NataliaTepluhina commented Mar 27, 2021

CyberAP Mar 27, 2021 •

edited

Loading

NataliaTepluhina Mar 28, 2021

NataliaTepluhina Mar 28, 2021

CyberAP Mar 28, 2021

CyberAP Mar 27, 2021

NataliaTepluhina Mar 28, 2021

CyberAP Mar 27, 2021 •

edited

Loading

NataliaTepluhina Mar 28, 2021

CyberAP Mar 27, 2021

CyberAP Mar 27, 2021

danielroe Mar 27, 2021

NataliaTepluhina Mar 28, 2021

CyberAP Mar 27, 2021

NataliaTepluhina Mar 28, 2021

CyberAP commented Mar 27, 2021 •

edited

Loading

NataliaTepluhina commented Mar 28, 2021

skirtles-code left a comment

skirtles-code Mar 30, 2021

CyberAP Mar 30, 2021 •

edited

Loading

NataliaTepluhina commented Mar 31, 2021

skirtles-code left a comment

NataliaTepluhina commented Apr 5, 2021

iGiliy commented Apr 6, 2021

iGiliy commented Apr 6, 2021


		Most [custom directives](/guide/custom-directive.html#custom-directives) directly manipulate the DOM, which will cause errors during SSR. There are two ways to work around this:

		1. Prefer using components as the abstraction mechanism and work at the Virtual-DOM level (e.g. using [render functions](/guide/render-function.html#the-dom-tree)) instead.


		const isServer = typeof window === 'undefined'

		const history = isServer ? createMemoryHistory() : createWebHistory()


		In development mode, Vue will assert the client-side generated virtual DOM tree matches the DOM structure rendered from the server. If there is a mismatch, it will bail hydration, discard existing DOM and render from scratch. There will be a warning in the browser console but your site will still work.

		However, in production mode, this assertion is disabled for maximum performance, which means that it is crucial you ensure your client- and server-side DOM trees match. Otherwise your HTML will remain static and non-reactive.

Ssr webpack #937

Ssr webpack #937

Conversation

NataliaTepluhina commented Mar 10, 2021 • edited Loading

Description of Problem

NataliaTepluhina commented Mar 18, 2021

danielroe left a comment

Choose a reason for hiding this comment

skirtles-code left a comment

Choose a reason for hiding this comment

NataliaTepluhina commented Mar 27, 2021

CyberAP Mar 27, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CyberAP Mar 27, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CyberAP commented Mar 27, 2021 • edited Loading

NataliaTepluhina commented Mar 28, 2021

skirtles-code left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CyberAP Mar 30, 2021 • edited Loading

Choose a reason for hiding this comment

NataliaTepluhina commented Mar 31, 2021

skirtles-code left a comment

Choose a reason for hiding this comment

NataliaTepluhina commented Apr 5, 2021

iGiliy commented Apr 6, 2021

iGiliy commented Apr 6, 2021

NataliaTepluhina commented Mar 10, 2021 •

edited

Loading

CyberAP Mar 27, 2021 •

edited

Loading

CyberAP Mar 27, 2021 •

edited

Loading

CyberAP commented Mar 27, 2021 •

edited

Loading

CyberAP Mar 30, 2021 •

edited

Loading