Issue
I am trying to build a landing page that has a date picker in it and after the user has selected it they can click a button that will redirect them to a page. I am using NextJS and the parent component called Landing is SSR as I would like it to be good enough for SEO. But looking at date pickers for react it seems all have to be rendered at the client. I am using react-modern-calendar-date-picker and the way to set the selected date is using state unless it can be done some other way. As such it must be a client rendered component but I was wondering if it can done some other way.
const DynamicDatePicker = dynamic(() => import('react-modern-calendar-date-picker'), { ssr: false });
I see this imports at the client but what is the point if I cannot use this due to the state. Any ideas? My approach is to create the entire component as a client side component but again it does not seem as the best solution with SEO in mind.
Solution
Problem :
I am trying to build a landing page that has a date picker in it and after the user has selected it they can click a button that will redirect them to a page. I am using NextJS and the parent component called Landing is SSR as I would like it to be good enough for SEO.....
Solution : As per NextJS docs, Client Components are components which have Interactivity(onChange(), onClick() etc) or they are dependedent on browser APIs.
- As your component is using state & it has interacitivity then you should keep it as Client component.
Regarding SEO, you need to add SEO related details/data(title,description,tags etc. its called metatags
and this tags related data is Metadata
its responsible for SEO) in the page.js
. While page contains Client-side components you can still generate its metadata.
To generate metadata read the 1st link given below.
Example :
export const metadata =
{
title: 'Homepage',
description: 'Description of this page',
}
export default function Page() {
return (
<>
<ClientComponent/>
<OtherComponents/>
</>
)
}
Now when this above page is rendered, SEO related details are there. (there are many tags involved in making a page SEO friendly please read about them)
Please Read :
- Metadata : https://nextjs.org/docs/app/building-your-application/optimizing/metadata
- Client Components : https://nextjs.org/docs/app/building-your-application/rendering/client-components
- Server and Client Composition Patterns : https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns
- Search Engine Optimization : https://nextjs.org/learn-pages-router/seo/introduction-to-seo
Answered By - Beast80K
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.