WHAT - 前端同构 Isomorphic Javascript

什么是同构

在前端开发中，“同构”技术（Isomorphic JavaScript，也叫 通用渲染 / 通用 JavaScript）是指：

同一套 JavaScript 代码可以在客户端（浏览器）和服务端（Node.js）中运行，且渲染出一致的页面内容。

为什么要使用同构？

传统的前端 SPA（单页应用）有几个缺点：

• 首屏加载慢：因为需要先加载 JS，再渲染内容。
• SEO 不友好：搜索引擎可能抓不到 JS 渲染后的内容。
• 白屏时间长：页面加载前是空白的。

同构可以解决这些问题：

• 首屏服务端渲染（SSR）：服务器预先把 HTML 渲染好，浏览器能更快看到页面内容。
• SEO 友好：HTML 内容直接输出到页面，搜索引擎可以抓取。
• 客户端接管（Hydration）：客户端 JS 接管服务端渲染的内容，实现交互。

举个例子（以 React 为例）

在 React 中，你可以在服务器渲染一个组件：

// server.js
import { renderToString } from 'react-dom/server';
const html = renderToString(<App />);

然后把这段 HTML 返回给浏览器。

浏览器接收到后，再用 ReactDOM.hydrate() 来接管：

// client.js
import { hydrateRoot } from 'react-dom/client';
hydrateRoot(document.getElementById('root'), <App />);

这样，同一份组件代码既能在服务端渲染，又能在客户端继续运行。

常见的同构框架

• Next.js：最流行的 React 同构框架，支持 SSR、SSG、ISR。
• Nuxt.js：Vue 的同构框架。
• Remix、SvelteKit 等也支持同构渲染。

总结

前端同构就是“组件代码一套走天下”，让你的页面在服务器和浏览器都能渲染，提升首屏速度和 SEO。