Should I make the whole site client?
Answered
Gray Flycatcher posted this in #help-forum
Gray FlycatcherOP
Hi, I want to make a website similar to this (http://us.bobaicecream.com), so quite a bit of it relies on client side aspects such as animations on scroll and user interactions, so should I just make the entire website use client? Is there also some library or smth that can do the scroll to fade in text animations? otherwise i can just do it with scroll events.
Answered by B33fb0n3
you don't need to do everything clientside. As you can see on the website you shared: the website is serverside rendered as well: (see attached).
So I would suggest you to either build it clientside as you said and use a reverse proxy to cache and serve it as static (but interactive) data or you use SSR and make interactive parts of it.
For animations I like to use framer motion. But there are GSAP & React Spring as well, that are pretty nice. Please don't use just browser scroll events or something..
So I would suggest you to either build it clientside as you said and use a reverse proxy to cache and serve it as static (but interactive) data or you use SSR and make interactive parts of it.
For animations I like to use framer motion. But there are GSAP & React Spring as well, that are pretty nice. Please don't use just browser scroll events or something..
10 Replies
@Gray Flycatcher Hi, I want to make a website similar to this (http://us.bobaicecream.com), so quite a bit of it relies on client side aspects such as animations on scroll and user interactions, so should I just make the entire website use client? Is there also some library or smth that can do the scroll to fade in text animations? otherwise i can just do it with scroll events.
you don't need to do everything clientside. As you can see on the website you shared: the website is serverside rendered as well: (see attached).
So I would suggest you to either build it clientside as you said and use a reverse proxy to cache and serve it as static (but interactive) data or you use SSR and make interactive parts of it.
For animations I like to use framer motion. But there are GSAP & React Spring as well, that are pretty nice. Please don't use just browser scroll events or something..
So I would suggest you to either build it clientside as you said and use a reverse proxy to cache and serve it as static (but interactive) data or you use SSR and make interactive parts of it.
For animations I like to use framer motion. But there are GSAP & React Spring as well, that are pretty nice. Please don't use just browser scroll events or something..
Answer
@B33fb0n3 you don't need to do everything clientside. As you can see on the website you shared: the website is serverside rendered as well: (see attached).
So I would suggest you to either build it clientside as you said and use a reverse proxy to cache and serve it as static (but interactive) data or you use SSR and make interactive parts of it.
For animations I like to use framer motion. But there are GSAP & React Spring as well, that are pretty nice. Please don't use just browser scroll events or something..
Gray FlycatcherOP
ahh ok i see, ill have look into framer and stuff, but wdym by build it clientside as you said and use a reverse proxy to cache and serve it as static?
@Gray Flycatcher ahh ok i see, ill have look into framer and stuff, but wdym by *build it clientside as you said and use a reverse proxy to cache and serve it as static*?
building it clientside means, that you can build your whole app clientside and using a reverse proxy means, that you can use a reverse proxy to serve the specific contents of your website statically, so it can be indexed by search engines
@B33fb0n3 building it clientside means, that you can build your whole app clientside and using a reverse proxy means, that you can use a reverse proxy to serve the specific contents of your website statically, so it can be indexed by search engines
Gray FlycatcherOP
so does the reverse proxy fetch server rendered components?
Gray FlycatcherOP
and how would i acc implement it in next
@Gray Flycatcher so does the reverse proxy fetch server rendered components?
What I am telling you are two possible paths:
1. Make everything clientside.
2. Make everything serverside with clientside parts
Problem on 1.:
No indexing for search engines.
Solution: Use a reverse proxy that serves your page as static content
Of course you can also render everything using SSR. At the end I am just showing you possible solutions
1. Make everything clientside.
2. Make everything serverside with clientside parts
Problem on 1.:
No indexing for search engines.
Solution: Use a reverse proxy that serves your page as static content
Of course you can also render everything using SSR. At the end I am just showing you possible solutions
@B33fb0n3 What I am telling you are two possible paths:
1. Make everything clientside.
2. Make everything serverside with clientside parts
Problem on 1.:
No indexing for search engines.
Solution: Use a reverse proxy that serves your page as static content
Of course you can also render everything using SSR. At the end I am just showing you possible solutions
Gray FlycatcherOP
ohh right so the reverse proxy is just for indexing purposes. If i did the first option, server side with clientside parts, would the clientside parts get indexed too?
@Gray Flycatcher ohh right so the reverse proxy is just for indexing purposes. If i did the first option, server side with clientside parts, would the clientside parts get indexed too?
yes it would, because nextjs renderes also 'use client' files on the server and only hydrates them on the clientside when they are marked as 'use client'
@B33fb0n3 yes it would, because nextjs renderes also 'use client' files on the server and only hydrates them on the clientside when they are marked as 'use client'
Gray FlycatcherOP
ah okay ill go with the SSR with client components then as it seems the simplest in terms of making it better for seo
happy to help