React+NextJS 服务器端渲染一个页面，获取数据并显示它

Question

目前，我正在使用客户端渲染页面，该页面使用 api 获取数据，然后显示此原始数据。

'use client'

import React, { useState, useEffect } from 'react'
import axios from 'axios';

const SolarPanels = () => {
    const [titles, setTitles] = useState([]);

    useEffect(() => {
        axios.get(`/api/panelUpdate?cb=${Date.now()}`, {
            headers: {
                'Cache-Control': 'no-cache',   // Prevents axios from caching
                'Pragma': 'no-cache',
                'Expires': '0'
            }
        })
            .then((response) => { setTitles(response.data.documents[0].productDetails) })
            .catch((error) => { console.error(error.message) });
    }, []);

    return (
        <div>
            <h1>Panels data</h1>
            <p>{titles.map((element) => {
                return <div>{JSON.stringify(element)}</div>
            })}</p>
        </div>
    );
}

export default SolarPanels

我读到最好执行客户端渲染而不是服务器端渲染，因此我想更改此代码以实现此目的。除了刚刚使用的钩子之外，我不打算使用其他钩子。

另外，请告知是否值得将其转换为客户端渲染？

Answer 1

在 Next.js 中，您可以制作

Client Components

，但它们只会在服务器端呈现。但是，由于您正在使用 useEffect，因此您可能在服务器端渲染方面过度使用它。如果可能的话，如果你想进行客户端渲染，你可以切换到react。

不使用 Nextjs 进行服务器端渲染似乎有点奇怪。您可能需要重新考虑是否需要客户端渲染或 SSR。

阅读此了解更多信息