Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Improve the docs on SSR. There a big gap between the docs and repo used as the complete SSR example

See original GitHub issue

🚀 Feature Proposal

Improve the docs on Code Splitting + SSR.

Motivation

I tried my best to follow the docs on how to implement code splitting + SSR, but was unable to do so. IMO, there is a big information gap between the docs and the complete repo used as example.

Why does this feature belong in the Loadable Component ecosystem?

It will be easier for devs to use this package.

Pitch

I went through the docs multiple times and I feel that there is huge gap between the docs and the example repo that is supposed to show a real use case of that set up.

The docs mention the following: (link)

import { renderToString } from 'react-dom/server'
import { ChunkExtractor } from '@loadable/server'
const statsFile = path.resolve('../dist/loadable-stats.json')
const extractor = new ChunkExtractor({ statsFile })
const html = renderToString(extractor.collectChunks(<YourApp />))                      // Where does that App come from?
const scriptTags = extractor.getScriptTags() // or extractor.getScriptElements();

This is the repo’s server/main.js (link)

import path from 'path'
import express from 'express'
import React from 'react'
import { renderToString } from 'react-dom/server'
import { ChunkExtractor } from '@loadable/server'

const app = express()

app.use(express.static(path.join(__dirname, '../../public')))

if (process.env.NODE_ENV !== 'production') {
  /* eslint-disable global-require, import/no-extraneous-dependencies */
  const { default: webpackConfig } = require('../../webpack.config.babel')
  const webpackDevMiddleware = require('webpack-dev-middleware')
  const webpack = require('webpack')
  /* eslint-enable global-require, import/no-extraneous-dependencies */

  const compiler = webpack(webpackConfig)

  app.use(
    webpackDevMiddleware(compiler, {
      logLevel: 'silent',
      publicPath: '/dist/web',
      writeToDisk(filePath) {
        return /dist\/node\//.test(filePath) || /loadable-stats/.test(filePath)
      },
    }),
  )
}

const nodeStats = path.resolve(
  __dirname,
  '../../public/dist/node/loadable-stats.json',
)

const webStats = path.resolve(
  __dirname,
  '../../public/dist/web/loadable-stats.json',
)

app.get('*', (req, res) => {
  const nodeExtractor = new ChunkExtractor({ statsFile: nodeStats })
  const { default: App } = nodeExtractor.requireEntrypoint()

  const webExtractor = new ChunkExtractor({ statsFile: webStats })
  const jsx = webExtractor.collectChunks(<App />)

  const html = renderToString(jsx)

  res.set('content-type', 'text/html')
  res.send(`
      <!DOCTYPE html>
      <html>
        <head>
        ${webExtractor.getLinkTags()}
        ${webExtractor.getStyleTags()}
        </head>
        <body>
          <div id="main">${html}</div>
          ${webExtractor.getScriptTags()}
        </body>
      </html>
    `)
})

// eslint-disable-next-line no-console
app.listen(9000, () => console.log('Server started http://localhost:9000'))

The repo uses webpack-dev-middleware and I don’t get exactly why. Is this for development only? Shouldn’t the repo show a production use case? It got me really confused.

What also got me confused was the fact that it seems to use webpack for both client and server builds, which I’m not used to. I usually only use webpack for client code (to run on the browser).

The docs don’t mention how to configure the webpack bundle for the server and it doesn’t seem like a straightforward config. Should you have another index.tsx file? Or should you set App.tsx as the entrypoint? How to keep filenames with [hash] consistent on the two builds? The repo uses two ChunkExtractors which was also a surprise.

Is there another repo with a production example of Code Splitting + SSR that I could use as reference?

Thank you all for this package. Hope my comments will help to improve it.

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:6

Top GitHub Comments

6reactions

codepunktcommented, Apr 3, 2021

I have a few questions. If documentation could answer those, that would be nice.

why do we need to get the App via requireEntrypoint instead of just importing it? If I take the ssr example and import App instead, I’m getting “Error: Cannot find module ‘./main.css’” and don’t know why.
Do we need to have 2 webpack builds, resulting in two stats-files? I don’t understand why, but this is probably related to question 1

0reactions

stale[bot]commented, Jun 14, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.