SPA ClientSideRendering的缺点
- 如果用户网络情况不好或者用户设备老旧，用户会等待相当一段长的时间，期间首页可能只有一个loading或者白屏。
- 不利于搜索引擎收录
- 不利于社交网络的连接分享
解决思路
- 关键页面使用静态HTML，不用JS渲染
- 使用类似react-snapshot之类的库，打包页面成HTML静态页面，保存到单独文件夹并且单独部署
"build": "webpack && react-snapshot --build-dir static" - 使用 server side render js, 这种应用简称 isomorphic 同构 或 universal 普遍 应用
2种最流行的SSR for React :
next.js — https://github.com/zeit/next.js/
Gatsby — https://github.com/gatsbyjs/gatsby
JavaScript for your components is rendered on the server into an HTML string. This HTML is delivered to the browser, which can appear to result in a fast First Contentful Paint or Largest Contentful Paint.
the differences between Next.js SSR and Server Components from Dan Abramov
- Code for Server Components is never delivered to the client. In many implementations of SSR using React, component code gets sent to the client via JavaScript bundles anyway. This can delay interactivity.
- Server components enable access to the back-end from anywhere in the tree. When using Next.js, you’re used to accessing the back-end via getServerProps() which has the limitation of only working at the top-level page. Random npm components are unable to do this.
- Server Components may be refetched while maintaining Client-side state inside of the tree. This is because the main transport mechanism is much richer than just HTML, allowing the refetching of a server-rendered part (e.g such as a search result list) without blowing away state inside (e.g search input text, focus, text selection)
Some of the early integration work for Server Components will be done via a webpack plugin which:
- Locates all Client components
- Creates a mapping between IDs => chunk URLs
- A Node.js loader replaces imports to Client components with references to this map.
- Some of this work will require deeper integrations (e.g with pieces such as Routing) which is why getting this to work with a framework like Next.js will be valuable.
