next.js 用于日期拾取的SSR组件？

x6h2sr28 于 12个月前发布在其他

关注(0)|答案(1)|浏览(95)

我试图建立一个着陆页，有一个日期选择器在它和用户选择后，他们可以点击一个按钮，将重定向到一个页面。我使用NextJS和父组件称为着陆是SSR，因为我希望它是足够好的搜索引擎优化。但在寻找日期选择器的React，它似乎都必须在客户端呈现。我使用的是react-modern-datar-date-选择器和设置选定日期的方法是使用状态，除非它可以用其他方法完成。因此，它必须是一个客户端呈现的组件，但我想知道它是否可以用其他方法完成。

const DynamicDatePicker = dynamic(() => import('react-modern-calendar-date-picker'), { ssr: false });

字符串
我在客户端看到了这个导入，但是如果我因为状态而不能使用这个，那又有什么意义呢？我的方法是将整个组件创建为客户端组件，但是它似乎并不是考虑SEO的最佳解决方案。

next.js

来源：https://stackoverflow.com/questions/77724847/ssr-component-for-date-picking

1条答案

按热度按时间

kwvwclae1#

问题：

我试图建立一个目标网页，有一个日期选择器在它和一个后，用户选择它，他们可以点击一个按钮，将重定向到一个页面。我使用NextJS和父组件称为登陆是SSR，因为我想它是足够好的搜索引擎优化。

**解决方案：**根据NextJS文档，客户端组件是具有交互性（onChange（），onClick（）等）或依赖于浏览器API的组件。

由于您的组件使用状态&它具有交互性，因此您应该将其保留为客户端组件。

关于SEO，您需要在page.js中添加与SEO相关的详细信息/数据（标题，描述，标签等，其称为metatags，此标签相关数据是Metadata，其负责SEO）。虽然页面包含客户端组件，但您仍然可以生成其元数据。

要生成元数据，请阅读下面给出的1 st链接。*
示例：

export const metadata = 
{
  title: 'Homepage',
  description: 'Description of this page',
}
     
export default function Page() {
    return (
    <>
       <ClientComponent/>
       <OtherComponents/>
    </>
    
    )
}

字符串
现在，当这个上面的页面呈现，搜索引擎优化相关的细节。（有许多标签涉及使页面搜索引擎友好，请阅读有关它们）

请阅读：

1.元数据：https://nextjs.org/docs/app/building-your-application/optimizing/metadata
1.客户端组件：https://nextjs.org/docs/app/building-your-application/rendering/client-components
1.服务器端和客户端组成模式：https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns
1.搜索引擎优化：https://nextjs.org/learn-pages-router/seo/introduction-to-seo

赞(0）回复(0）举报 12个月前

我来回答

next.js 用于日期拾取的SSR组件？

1条答案

相关问题

热门标签

最新问答