Timezones: Use local time when doing server side code
Answered
Forest bachac posted this in #help-forum
Forest bachacOP
- My website contains news articles; which are server-side rendered for optimal SEO.
- However, I have come across the issue that they will always display the time of being created as UTC, because it is rendering on the server.
- So, how can I optimally use server-side code but render the timezone on the client?
Should I just make a client component that returns a string with the time?
- However, I have come across the issue that they will always display the time of being created as UTC, because it is rendering on the server.
- So, how can I optimally use server-side code but render the timezone on the client?
Should I just make a client component that returns a string with the time?
Answered by Blue orchard bee
Yes, ideally just consume on the client the timestamp to have the browser localize the date and time.
32 Replies
Blue orchard bee
Yes, ideally just consume on the client the timestamp to have the browser localize the date and time.
Answer
Blue orchard bee
If your articles are completely static you could explore ISR, it's primarily designed for large amounts of static content.
And if you ever edit your content from your CMS, you can use on-demand revalidation to have it rebuilt.
https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation
https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation
Let me know if that answers your question @Forest bachac :D
@Blue orchard bee Yes, ideally just consume on the client the timestamp to have the browser localize the date and time.
Forest bachacOP
So then upon SSR no timestamp is available, is this bad for SEO?
Or should I load one on server and change it upon load
Blue orchard bee
Sorry, I didn't consider that, you could hide the UTC timestamp in the page
You can leave it, hidden, just for scrapers for SEO
Something like Published on {UTC_DATE}, but you leave it visually hidden for users.
While you properly render it client-side for users.
Tailwind has a pretty neat utility style just for this
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;Forest bachacOP
thats className="hidden" right
Blue orchard bee
No, sr-only
Scrapers should be able to pick up your content. Honestly, if you don't really mind the spacing of the text, you can also just put text-transparent and call it a day.
@Blue orchard bee https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#using-on-demand-revalidation
Forest bachacOP
This is page router right
export const revalidate = 3600;
export const getArticle = cache(async (id: string) => {
const article = await getArticleById(Number(id));
return article;
});This is the way for app router I believe
Not sure how to do On demand revalidation for app router tho
Blue orchard bee
There's a switch top left to change docs to App Router
This is for App
Forest bachacOP
Yes but thats only available for fetch requests not for 3rd party libs
Blue orchard bee
Are you using Axios?
These options within fetch should be available in cache() too.
It's definitely different for non-fetch implementations to revalidate on demand, although setting time-revalidation is much easier.
@Blue orchard bee Are you using Axios?
Forest bachacOP
No I'm doing the recommended method of fetching directly from the server components
I'm using a database
@Blue orchard bee https://nextjs.org/docs/app/api-reference/functions/revalidatePath
Forest bachacOP
Thank you this should work