如何搭建带有server-render和react-router的Meteor项目模板？

我完全懂你升级后的挫败感——Meteor 1.4到1.6的变化确实有点让人措手不及，过去那种“导入即用”的轻松感没了，包的初始化逻辑和配置要求变多，官方文档覆盖不全也挺闹心的。别着急，我给你一步步捋清楚怎么搭建能正常跑通的模板：

1. 初始化React项目 #

首先用Meteor官方的React starter创建项目，省去基础的React配置：

meteor create --react my-ssr-router-project
cd my-ssr-router-project

2. 安装必要依赖 #

先添加Meteor官方的server-render包，再适配Meteor 1.6的React版本，安装react-router相关依赖（选v5版本最稳妥）：

# 添加Meteor服务端渲染核心包
meteor add server-render

# 安装react-router依赖
npm install react-router-dom@5 react-router-config

3. 定义共享路由配置 #

创建imports/routes.js文件，把路由规则放在这里，让客户端和服务端共用，避免重复代码：

import React from 'react';

// 先定义几个测试页面组件
const Home = () => <div>Home Page (SSR已生效)</div>;
const About = () => <div>About Page (SSR已生效)</div>;
const NotFound = () => <div>404 Not Found</div>;

// 路由配置数组
export const routes = [
  {
    path: '/',
    exact: true,
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    component: NotFound
  }
];

4. 修改客户端入口（client/main.js） #

替换原有代码，用BrowserRouter包裹路由组件，实现客户端路由逻辑：

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import { routes } from '../imports/routes';

const App = () => (
  <BrowserRouter>
    {renderRoutes(routes)}
  </BrowserRouter>
);

Meteor.startup(() => {
  render(<App />, document.getElementById('react-target'));
});

5. 配置服务端渲染核心逻辑（server/main.js） #

这里是关键，利用Meteor的ServerRender模块，结合StaticRouter处理服务端路由请求，把渲染后的HTML返回给客户端：

import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import { ServerRender } from 'meteor/server-render';
import { routes } from '../imports/routes';

ServerRender.renderIntoElementById('react-target', (req) => {
  // 记录路由上下文，处理重定向逻辑
  const context = {};
  // 服务端渲染React组件为HTML字符串
  const appHtml = renderToString(
    <StaticRouter location={req.url} context={context}>
      {renderRoutes(routes)}
    </StaticRouter>
  );

  // 如果路由触发重定向，返回重定向响应
  if (context.url) {
    req.response.writeHead(302, { Location: context.url });
    req.response.end();
    return '';
  }

  return appHtml;
});

6. 调整主模板文件（client/main.html） #

确保模板里有对应ID的渲染容器，同时保留Meteor的自动脚本注入点：

<head>
  <title>SSR React Router Meteor App</title>
</head>

<body>
  <div id="react-target"></div>
  <!-- 保留Meteor默认的脚本注入，不要删除 -->
  {{> hello}}
</body>

<!-- 可删除默认的hello模板，或保留不影响运行 -->
<template name="hello">
</template>

7. 测试运行 #

启动项目验证效果：

meteor run

访问http://localhost:3000和http://localhost:3000/about，查看页面源代码，能看到页面内容已经被渲染在HTML中，说明服务端渲染生效了！

进阶注意事项 #

• 数据预取：如果页面需要服务端获取数据，可以在路由配置中添加loadData方法，在服务端渲染前调用，再通过全局变量或状态管理把数据传递给客户端。
• 样式兼容：服务端渲染时CSS需要特殊处理，推荐用styled-components/emotion这类支持SSR的CSS-in-JS方案，或配合Meteor的fourseven:scss等静态样式包。
• 包兼容处理：部分第三方包在服务端环境可能报错，可通过Meteor.isClient/Meteor.isServer做条件导入或初始化。

内容的提问来源于stack exchange，提问作者Yeats