如何在 React 中使用預渲染(pre-rendering)？

React 是一個用於構建用戶界面的 JavaScript 庫，它可以讓開發者更輕鬆地構建高性能的網頁應用程序。預渲染是一種技術，可以在服務器端渲染 React 應用程序，以提高性能和減少加載時間。本文將介紹如何在 React 中使用預渲染。

什麼是預渲染？

預渲染是一種技術，可以在服務器端渲染 React 應用程序，以提高性能和減少加載時間。它可以讓您的應用程序在瀏覽器中更快地加載，並提供更好的用戶體驗。

如何在 React 中使用預渲染？

在 React 中使用預渲染的方法有很多，但最常見的方法是使用 ReactDOMServer 。ReactDOMServer 是一個 React 專用的服務器端渲染器，可以將 React 應用程序渲染為靜態 HTML。

import React from 'react';
import ReactDOMServer from 'react-dom/server';

const App = () => {
  return (
    

      
Hello World!
    
  );
};

const html = ReactDOMServer.renderToString();

console.log(html);
// 
Hello World!

上面的程式碼使用 ReactDOMServer.renderToString() 方法將 React 應用程序渲染為靜態 HTML。

總結

本文介紹了如何在 React 中使用預渲染。預渲染可以提高應用程序的性能和加載速度，並提供更好的用戶體驗。使用 ReactDOMServer 來渲染 React 應用程序，可以輕鬆地將應用程序渲染為靜態 HTML。