SolidJS 如何实现服务端渲染（SSR）？有哪些渲染模式？ - 面试题

SolidJS 支持服务端渲染（SSR），提供多种渲染模式：

基本 SSR 设置：

javascript
// entry-server.jsx
import { renderToString } from 'solid-js/web';
import App from './App';

export function render(url) {
  return renderToString(() => <App url={url} />);
}

// entry-client.jsx
import { hydrate } from 'solid-js/web';
import App from './App';

hydrate(() => <App />, document);

渲染模式：

静态生成（SSG）：

javascript
import { renderToStringAsync } from 'solid-js/web';

export async function getStaticPaths() {
  return ['/about', '/contact'];
}

export default async function Page({ params }) {
  return renderToStringAsync(() => <Component />);
}

服务端渲染（SSR）：

javascript
import { StartServer, createHandler } from '@solidjs/start/server';

export default createHandler(() => (
  <StartServer
    document={({ assets, children }) => (
      <html>
        <head>{assets}</head>
        <body>{children}</body>
      </html>
    )}
  />
));

流式渲染：

javascript
import { renderToStream } from 'solid-js/web';

app.get('*', async (req, res) => {
  const stream = renderToStream(() => <App />);
  stream.pipe(res);
});

数据获取：

javascript
// 使用 createResource 处理异步数据
const [data] = createResource(fetchData, {
  initialValue: null,
  deferStream: true // 支持流式传输
});

// 服务端数据预取
export async function getData() {
  return await fetchData();
}

同构应用：

javascript
// 在服务端和客户端都能运行的代码
function Component() {
  const isServer = useIsServer();
  
  return (
    <div>
      {isServer() ? 'Server' : 'Client'}
    </div>
  );
}

性能优化：

使用 deferStream 延迟加载
预取关键数据
优化 hydration 过程
使用 Suspense 边界