Next.js应用服务端渲染现有实现是否有更优方案？

你当前用renderToString配合dangerouslySetInnerHTML的方式虽然能正常运行，但完全没必要——Next.js本身就内置了完善的SSR支持，不需要手动拆分组件渲染再插入HTML。下面是优化后的实现：

优化思路 #

• 直接在Home组件中渲染HeroFeatures、Feature、Testimonial组件，把getServerSideProps里拿到的t props传递过去即可
• 移除手动renderToString和dangerouslySetInnerHTML，让Next.js自动处理服务端渲染与客户端 hydration

修改后的代码 #

import Feature from 'components/home/Feature/Feature';
import HeroArea from 'components/home/HeroArea/HeroArea';
import HeroFeatures from 'components/home/HeroFeatures/HeroFeatures';
import Newsletter from 'components/home/Newsletter/Newsletter';
import PopularCryptocurrencies from 'components/home/PopularCryptocurrencies/PopularCryptocurrencies';
import Testimonial from 'components/home/Testimonial/Testimonial';
import SponsorCard from 'components/sponsor_card/SponserCard';
import type { NextPage } from 'next';

import { getTranslations } from '../utils/translations';

// 保留你的IndexType接口（如果后续会用到的话）
interface IndexType {
  popularCryptoData: {
    current_price: number;
    high_24h: number;
    id: string;
    low_24h: number;
    market_cap: number;
    market_cap_rank: 1;
    name: string;
    price_change_24h: number;
    symbol: string;
    total_volume: number;
    image: string;
  }[];
}

const Home: NextPage<{ t: ReturnType<typeof getTranslations> }> = ({ t }) => {
  return (
    <div data-theme='dark'>
      <main className='relative overflow-hidden'>
        <div className="bg-[url('../public/images/DarkBlueBG.svg')] bg-cover">
          <HeroArea />
          {/* 直接渲染组件，传递t props */}
          <HeroFeatures t={t} />

          <PopularCryptocurrencies />

          <Feature t={t} />
          <Testimonial t={t} />
          <Newsletter />
          <div className='block absolute'>
            <SponsorCard />
          </div>
        </div>
      </main>
    </div>
  );
};

export const getServerSideProps = async ({ locale }: any) => {
  const t = getTranslations(locale);

  // 移除所有renderToString调用，直接返回t即可
  return {
    props: {
      t,
    },
  };
};

export default Home;

优化后的好处 #

1. 避免XSS风险：dangerouslySetInnerHTML会跳过React的安全校验，直接插入HTML，若t里包含用户输入内容，容易引发XSS攻击，优化后完全规避这个问题
2. 保留React交互能力：原来的方式插入的是纯HTML，客户端无法将这些节点与React组件关联，若子组件有交互逻辑（比如点击事件）会失效；优化后Next.js会自动完成客户端 hydration，保证组件交互正常
3. 减少冗余渲染：手动调用renderToString相当于重复执行了一次组件渲染，Next.js的内置SSR会一次性完成整个页面渲染，性能更优
4. 代码更简洁易维护：去掉了不必要的字符串转换和HTML插入逻辑，代码结构更清晰

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