Is react router still working on build?

[jonathanasquier]

I just noticed that there is no full page reload (react-static-boilerplate) when clicking on links, although static pages are generated for each route, it seems that the react router still works on the front, and that the content of each other page is is the js script (ex: about page)
Is that by design? That would mean my js script grows on each page added?
Looks like other generated page are useless...
Is there a way I could have "real" links after build?

Thanks!

[iansinnott]

Yup! You're right, this is how it works and it is indeed by design. You're also right that your bundle size for every single page will grow with each page added. This is certainly not ideal, but it's also not generally an issue. Here's why:

• The majority of your bundled code is probably going to be vendor code like React, React Router, etc, and this code would need to be included on every page no matter what. Your actual app code is mostly likely very small by comparison.
• In relation to the first point, your bundle size doesn't grow in a 1:1 ratio to the number of pages you have. For example, going from 1 page to 2 pages will not double the size of your bundle, it will likely only increase by a very small amount.
• If you really do need to split your code into separate bundles you can do this directly with webpack (see code splitting).

All that being said, supporting automatic bundle splitting is definitely an optimization I'd like to include in this plugin, it's just low priority for the above reasons.

---

More generally, the goal of this project was allow you to build a single page app (Linking pages with react router) and simply drop in this plugin to get static pages from each route. This means that the app would naturally still support instant navigation with RR, but you now have a fully rendered static page backing every route. So the benefits you get are:

• Seamless initial render, since react just has to set up event listeners and doesn't need to construct DOM
• Routes that are fully parseable by search engines

Going to close this out but feel free to keep the discussion going here. If you see any drawbacks to this approach that I may have missed I'd love to hear them. I want this project to be the best it can be.

[jonathanasquier]

Ok nice :)

I have a LazilyLoad higher lvl components that enables me to split route code in separate scripts, it works well in dev but breaks on build because of Cannot read property 'initial' of undefined from the extract-text-webpack-plugin, and this PR won't do :(

I use it this way

import About from 'bundle?lazy&name=[name]!./components/About';

class ZAbout extends LazilyLoad {
  constructor() {
    super(About);
  }
  waiting() {
    return <div>Loading about...</div>;
  }
}

And it breaks as soon as I import using the bundle-loader
That would bring the best of both worlds, if you manage lazy loading feel free to mention me ! :)

[jonathanasquier]

I have a question regarding the front end router and SEO.
Do I have to handle nginx rules to redirect crawlers to about.html when they follow the /about link? or does it work out of the box?

thanks!

[iansinnott]

That will depend on your configuration, so if you're managing your own server then yes it will depend on your Nginx (or Apache) config.

I know from my own use that everything works out of the box with Surge.sh and Netlify, but you might have to configure nginx yourself if it's your server. In Nginx that looks something like this:

 try_files $uri $uri.html $uri/index.html =404;

Check out the full configuration I used in the past in the boilerplate repository:

https://github.com/iansinnott/react-static-boilerplate/blob/master/scripts/generate-nginx-conf.js

[jonathanasquier]

Thanks!