Next.js -- SSG of React

SSR

https://css-tricks.com/server-side-react-rendering/

react代码在客户端渲染，这样导致SEO不友好。

由此引入，SSR 服务器端渲染技术：ReactDomServer库。

The Benefits of Server-Side Rendering

SEO might be the conversation that starts your team talking about server-side rendering, but it’s not the only potential benefit.

Here’s the big one: server-side rendering displays pages faster. With server-side rendering, your server’s response to the browser is the HTML of your page that is ready to be rendered so the browser can start rendering without having to wait for all the JavaScript to be downloaded and executed. There’s no “white page” while the browser downloads and executes the JavaScript and other assets needed to render the page, which is what might happen in an entirely client-rendered React site.

 

import express from 'express';
import fs from 'fs';
import path from 'path';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import Hello from './Hello.js';

function handleRender(req, res) {
  // Renders our Hello component into an HTML string
  const html = ReactDOMServer.renderToString(<Hello />);

  // Load contents of index.html
  fs.readFile('./index.html', 'utf8', function (err, data) {
    if (err) throw err;

    // Inserts the rendered React HTML into our main div
    const document = data.replace(/<div id="app"><\/div>/, `<div id="app">${html}</div>`);

    // Sends the response back to the client
    res.send(document);
  });
}

const app = express();

// Serve built files with static files middleware
app.use('/build', express.static(path.join(__dirname, 'build')));

// Serve requests with our handleRender function
app.get('*', handleRender);

// Start server
app.listen(3000);

 

SSG

https://pagepro.co/blog/how-to-use-next-js-static-site-generator/#what-are-static-site-generators

SSR是面向单个页面，例如首页， 做服务器端渲染， 提高SEO效果。

SSG是面向整个网站， 提升SEO效果， 同时不牺牲网站质量，和用户体验。

Static Site Generators (SSG) are becoming extremely popular in the world of web development and Next.js is a proud competitor in this race.

Next.js enables you to build superfast and super SEO friendly websites, without compromising the quality, and the freedom of User Experience execution.

 

SSG ==

一次性加载，

安全，再无服务器交互

用户体验高。

🚀 STATIC = BLAZINGLY FAST 🚀

Static Site Generator are extremely fast. Once loaded, they prefetches resources for other pages so clicking around the site feels like a blink of an eye.

💎 STATIC = SAFE 💎

You will just publish static files, which means there is no direct connection to the database, dependencies, user data or other sensitive information.

😎 STATIC = ENHANCED USER EXPERIENCE 😎

Simply because clicking and walking through your website feels like a walk in a park on a sunny day with no unexpected turns, stairs, or dead ends.

Static Pages got also kind of a new brand name on the market, which is Jamstack.

 

nextjs

一个框架， 让开发者拥有写react的体验，但是最终结果是编译好的静态页面。

What is Next.js?

“Next is a framework which we can use to build React sites with Server Side Rendering or generate static pages from our react code. All that configured for us by Next itself.”

 

操作体验

https://pagepro.co/blog/how-to-use-next-js-static-site-generator/#what-are-static-site-generators

 

基于上面的教程，改造了一个静态页面库：

https://github.com/fanqingsong/nextjs_temple

遇到问题解决：

https://stackoverflow.com/questions/65487914/error-image-optimization-using-next-js-default-loader-is-not-compatible-with-n

module.exports = {
  // https://github.com/vercel/next.js/issues/21079
  // Remove this workaround whenever the issue is fixed
  images: {
    loader: 'imgix',
    path: '',
  },
}

 

https://www.nextjs.cn/docs/api-reference/next.config.js/cdn-support-with-asset-prefix

由于编译好的静态页面，依赖的css等资源，引用地址是 /_next/ 开头，没有做成 相对路径寻址，

需要 使用下面的配置改为相对寻址。

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  // Use the CDN in production and localhost for development.
  assetPrefix: isProd ? 'https://cdn.mydomain.com' : '',
}