recipe: server-side rendering

[smashercosmo]

Documentation Is:

• Missing
• Needed
• Confusing
• Not Sure?

Please Explain in Detail...

Our server-side rendered app uses webpack to build bundles for both client and server (via multicompiler). Currently we're using https://github.com/60frames/webpack-hot-server-middleware for smooth DX. Code is being hot-reloaded on both client and server. Is this something that can be achieved using webpack-plugin-serve?

Your Proposal for Changes

[shellscape]

(Note: I updated your issue with the Documentation template. Please use an appropriate issue template for your next issue)

While I don't personally have a lot of experience with server-side rendering, we'd be completely open to included documentation/recipes for SSR. Someone with the relevant experience will have to put that together.

[smashercosmo]

Thx for quick response and for what you're doing to make webpack DX better. I'll definitely play and experiment with webpack-plugin-serve and ssr (let's see if I can figure it out), but advice from developers who fill themself confident about ssr and server-side hot reloading is very much appreciated.

(Note: sorry for missing template. For some reason I chose Support, Help, and Advice option instead of Documentation one)

[shellscape]

No worries! If you can share a minimal repo that tries to accomplish this, I can try to assist. At the very least I can help with errors and such.

[matheus1lva]

The only thing that is going to be different is the way that you were used to work. We don't have a middleware with the same essence as WPS (YET), but you can do whatever you did before using the middleware options since you have access to Koa's app instance. All the other things are going to work flawlessly!

[smashercosmo]

Alright, unfortunately, after some thinking, I have to say that I have no idea how to tackle this issue. The problem is that I want compiled server bundle to be passed as a middleware to webpack-plugin-serve. Something like this:

const serve = new WebpackPluginServe({
  middleware: (app, builtins) => {
      app.use(/* here we need to pass compiled server bundle somehow */)
  }      
});

const config = [
   {
      entry: { client: './src/client.js' },
      output: {
        path: path.resolve(__dirname, 'dist'),
      },
      plugins: [serve],
      watch: true,
   },
   {
      entry: { server: './src/server.js' },
      output: {
        path: path.resolve(__dirname, 'dist'),
        libraryTarget: 'commonjs2',
      },
      target: 'node',
      plugins: [serve.attach()],
   },
]

But I don't know how it can be implemented or even if it's the right direction of thinking.

[shellscape]

This SurviveJS article on SSR might be a good reference: https://survivejs.com/webpack/output/server-side-rendering/

Particularly this part:

app.get("/", (req, res) =>
    res.status(200).send(renderMarkup(renderToString(SSR)))
  );

[smashercosmo]

I'm not quite sure how it might help. The problem is that I want compiled server bundle (taken from webpack's memory fs during compilation) to be passed as a middleware to webpack-plugin-serve. This is what webpack-hot-server-middleware is doing. And this could give us both ssr and hot-reloadable server code.

[shellscape]

compiled server bundle (taken from webpack's memory fs during compilation) to be passed as a middleware

that would require access to the compiler, which you don't have in this context. WPS doesn't write bundles to a memory-fs like webpack-dev-middleware (and by extension, webpack-serve and webpack-dev-server) does. The plugin just let's the compiler do what it wants to do. In the link I pasted, the server setup is requiring a file which exports the render methods. I have no knowledge of your bundle or environment, but exporting a function in the resulting server bundle, which would give you the function or info you need, seems reasonable (and happens to be what webpack-hot-server-middleware requires: https://github.com/60frames/webpack-hot-server-middleware/blob/master/src/index.js#L62)

From https://www.npmjs.com/package/webpack-hot-server-middleware:

Webpack Hot Server Middleware is designed to be used in conjunction with webpack-dev-middleware

That's a pretty important detail when comparing that with this plugin. You'll have to pull bundle content from the filesystem, rather than memory-fs like webpack-dev-middleware uses.

This is the function in hot-server-middleware that does most of the magic: https://github.com/60frames/webpack-hot-server-middleware/blob/dc02c342ec77de742bf15c361eb846af5e4a55db/src/index.js#L61-L77. That, along with createKoaHandler. buffer there is just the content of the file using the compier's filesystem: https://github.com/60frames/webpack-hot-server-middleware/blob/master/src/index.js#L153. And since you know where your files are being written (since you configured it) there's no need for direct access to the compiler, because we don't have to use compiler.outputFileSystem. The bundle files are already on disk.

So I think it's just a matter of breaking down that package to it's base components, knowing that the bundle is on disk, and implementing the portions of that which you actually need in order to get this to work.

[smashercosmo]

Thank you very much for the explanation. Somehow I missed that WPS doesn't use memory fs. Yes, having compiled bundles in the filesystem makes it much easier. Side question: how big of a impact on performance/build times does this approach have (I mean always writng to file system)?

[shellscape]

how big of a impact on performance/build times does this approach have (I mean always writng to file system)?

I personally haven't seen any drawback. On machines that don't have SSD drives, there's the possibility that it could be slower. The advantages in less complexity were worth the risk. Nearly everyone at my current and former positions all have laptops/desktops with SSDs, so there's really no noticeable difference. Everyone I interact with regularly that uses this plugin does immediately note how much less memory is being used though.

[smashercosmo]

Ok. Finally made it work. How to you want me to make a recipe? As a simple .md file or as a project, like react recipe?

[matheus1lva]

Ok. Finally made it work. How to you want me to make a recipe? As a simple .md file or as a project, like react recipe?

One .md file are usually for "config recipes", if the recipe you had done is a little bit more complex, i would add a project similar to react/vue, which is better to be understood and also people can download to reuse.