当前位置：首页 > React

后端如何使用react

2026-03-31 00:52:23React

后端使用 React 的方法

React 通常被视为前端框架，但可以通过以下方式在后端环境中使用或结合后端技术：

服务器端渲染 (SSR)

使用框架如 Next.js 或 Remix 实现服务器端渲染。Next.js 提供了 getServerSideProps 或 getStaticProps，允许在服务器端获取数据并渲染页面，再将完整的 HTML 发送到客户端。

示例代码（Next.js）：

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

function Page({ data }) {
  return <div>{data.title}</div>;
}

后端 API 与 React 交互

后端提供 RESTful API 或 GraphQL 接口，React 前端通过 fetch 或 axios 调用这些接口获取数据。

后端如何使用react

示例代码（调用 REST API）：

import { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return <div>{data?.message}</div>;
}

同构应用

结合 Node.js 后端（如 Express）与 React 的同构渲染。使用 react-dom/server 的 renderToString 在服务器端生成 HTML。

示例代码（Express + React SSR）：

后端如何使用react

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';

const app = express();

app.get('/', (req, res) => {
  const html = renderToString(<App />);
  res.send(`
    <html>
      <body>${html}</body>
    </html>
  `);
});

app.listen(3000);

后端作为 BFF 层

后端作为前端的后端（Backend for Frontend），聚合多个微服务的数据，为 React 前端提供定制化 API。

静态站点生成 (SSG)

使用 Next.js 或 Gatsby 在构建时生成静态 HTML，后端仅需托管静态文件。适合内容不频繁变化的场景。

示例代码（Next.js SSG）：

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return { props: { posts } };
}