讲讲 React 服务端渲染最佳实践方案【新版React + Nextjs 官方文档解读】

import { renderToString } from 'react-dom/server';

app.use('/', (request, response) => {
  const html = renderToString(<App />);
  response.send(html);
});

import { hydrateRoot } from 'react-dom/client';

hydrateRoot(document.getElementById('root'), <App/>);

import { renderToPipeableStream } from 'react-dom/server';

const stream = renderToPipeableStream(<App />);  
response.set('Content-Type', 'text/html');  
stream.pipe(res);  

import { renderToReadableStream } from 'react-dom/server';

async function handler(request) {
  const stream = await renderToReadableStream(<App />, {
    bootstrapScripts: ['/main.js']
  });
  return new Response(stream, {
    headers: { 'content-type': 'text/html' },
  });
}

import { renderToStaticMarkup } from 'react-dom/server';

// 路由处理程序语法取决于你的后端框架
app.use('/', (request, response) => {
  const html = renderToStaticMarkup(<Page />);
  response.send(html);
});

npm init

yarn add next react react-dom

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

function AboutPage() {
  return <div>Welcome to My blog!</div>
}

export default AboutPage

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

function Blog() {
  const posts = [...];
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export default Blog

// posts 是外部接口获取到后， getStaticProps 传入的
function Blog({ posts }) {...}

export async function getStaticProps() {
  // 调用外部 API 获取博文列表 (编译和打包时就会调用)
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // 通过返回 { props: { posts } } 对象，Blog 组件
  // 在构建时将接收到 `posts` 参数
  return {
    props: {
      posts,
    },
  }
}

// 此函数在构建时被调用
export async function getStaticPaths() {
  // 调用外部 API 获取博文列表
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // 据博文列表生成所有需要预渲染的路径
  const paths = posts.map((post) => ({
    params: { pid: post.id },
  }))

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false }
}

// 在构建时也会被调用
export async function getStaticProps({ params }) {
  // params 包含此片博文的 `pid` 信息。
  // 如果路由是 /posts/1，那么 params.pid 就是 1
  const res = await fetch(`https://.../posts/${params.pid}`)
  const post = await res.json()

  // 通过 props 参数向页面传递博文的数据
  return { props: { post } }
}

function Blog({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

// 如果有 css 就引入
import '../styles.css'

// 新创建的 `pages/_app.js` 文件中必须有此默认的导出（export）函数
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  margin: 0 auto;
}

yarn add sass

import variables from '../styles/variables.module.scss'

import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

import useSWR from 'swr'
import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  const { data, error } = useSWR('/api/navigation', fetcher)

  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>

  return (
    <>
      <Navbar links={data.links} />
      <main>{children}</main>
      <Footer />
    </>
  )
}

const fetcher = (url) => fetch(url).then((res) => res.json());

import Image from 'next/image'
import profilePic from '../public/me.png'

<Image
    src={profilePic}
    alt="Picture of the author"
/>

<Image
    src="/me.png"
    alt="Picture of the author"
    width={500}
    height={500}
    priority
/>

module.exports = {
  images: {
    domains: ['example.com', 'example2.com'],
  },
}

async rewrites() {
    return {
      fallback: [
        {
          source: '/home/:image*',
          destination: `https://${isProd ? CDNPath : filePath}/home/:image*`
        }
      ]
    }
}

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

class MyDocument extends Document {
...
    <Head>
        <Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" />
    </Head>
    <body>
      <Main />
      <NextScript />
    </body>
}

environment=development

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

import { appWithTranslation } from 'next-i18next';

...
export default memo(appWithTranslation(MyApp));

module.exports = {
  i18n: {
    localeDetection: false, // 不检测浏览器语言环境
    defaultLocale: 'en',
    locales: ['en' , 'zh']
  },
  localePath: typeof window === 'undefined'
    ? require('path').resolve('./public/locales')
    : require('path').resolve('./public/locales'),
  reloadOnPrerender: process.env.NEXT_PUBLIC_DOMAIN_ENV === 'development',
};

const { i18n } = require('./next-i18next.config');

module.exports = () => {

  return {
    i18n,
  }
}

import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';

const { t } = useTranslation(['common']);

...
// 渲染时使用
<button className={`${Style['btn-link']} mr-16 primary button-outlined`}>
  {t('login')}
</button>
...

export const getStaticProps = async ({
  locale,
}) => {
  return {
    props: {
      ...(await serverSideTranslations(locale ?? 'en', [
        'common'
      ])),
    },
  }
}

// 常用配置
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')

module.exports = (phase, { defaultConfig }) => {
  // 开发环境配置
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
        env: {
          env: 'dev', // 可在页面使用：<h1>env is: {process.env.env}</h1>
        },
        basePath: '/docs', // 基础路径，所有的Link跳转会以这个为基础
        compress: false, // 压缩代码
        generateEtags: false, // 禁用 ETag ？
        distDir: 'build', // 自定义输出目录
        async redirects() {  // 重定向
          return [
            {
              source: '/about',
              destination: '/',
              permanent: true,
            },
          ]
        },
        async rewrites() { // 重写资源路径，默认是在检查文件系统（页面和`/public`文件）之后、动态路由之前应用的；使用 fallback 表示每次检查文件和动态路由之后触发
          return {
            fallback: [
              {
                source: '/home/:image*',
                destination: `https://${isProd ? CDNPath : filePath}/home/:image*`
              },
            ]
          }
        },
      }
  }

  return {
    // 同上...
  }
}