星途面试题库

面试题：Next.js全局样式在SSR场景下的优化策略

当Next.js应用开启服务器端渲染（SSR）时，全局样式可能会遇到哪些性能和加载问题？你会采取哪些优化策略来解决这些问题，例如如何避免样式闪烁（FOUC），并提高页面首次加载性能，详细说明实现方案。

31.3万热度

难度

前端开发Next.js

知识考点

AI 面试

面试题答案

可能遇到的性能和加载问题

样式闪烁（FOUC）：在客户端样式加载和渲染之前，浏览器可能会短暂显示无样式的内容，影响用户体验。
首次加载性能：由于SSR要在服务器端生成HTML并包含样式，样式文件的大小和加载方式可能导致首次加载时间变长。

优化策略

避免样式闪烁（FOUC）
- 内联关键CSS：在服务器端渲染时，提取关键的CSS并内联到HTML中。这样，页面在加载时就有基本样式，避免无样式内容的短暂显示。在Next.js中，可以使用 styled-jsx/server 来实现内联样式。例如：

import { withStyles } from 'styled-jsx/server';

const styles = `
  body {
    font-family: Arial, sans-serif;
  }
`;

const MyPage = () => (
  <div>
    <p>My content</p>
    <style jsx global>{styles}</style>
  </div>
);

export default withStyles(styles)(MyPage);

- **使用 `@font - face` 加载字体**：确保字体在页面加载时就可用，避免因字体加载导致的样式重排。例如：

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2'),
       url('/fonts/myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

提高页面首次加载性能
- 代码拆分：将样式文件进行拆分，只加载当前页面所需的样式。在Next.js中，使用CSS Modules或styled - components都支持代码拆分。例如，对于CSS Modules：

import styles from './styles.module.css';

const MyComponent = () => (
  <div className={styles.container}>
    <p className={styles.text}>My text</p>
  </div>
);

- **优化CSS加载顺序**：将关键样式放在 `<head>` 标签中加载，确保在页面内容渲染之前样式可用。对于外部样式表，可以使用 `<link rel="preload" as="style" href="styles.css">` 进行预加载，然后在适当位置使用 `<link rel="stylesheet" href="styles.css">` 引入。
- **压缩和合并CSS**：在构建过程中，对CSS进行压缩和合并，减少文件大小和请求次数。Next.js默认会对CSS进行压缩，也可以使用工具如 `css - minimizer - webpack - plugin` 进一步优化。
- **使用CDN**：将样式文件部署到CDN，利用CDN的全球分布节点加速样式文件的加载。在Next.js配置文件 `next.config.js` 中，可以设置CDN路径：

module.exports = {
  assetPrefix: 'https://your - cdn - url.com'
};