on Index Page, render 2 UI based on Conditions & call the getServerSideProps() based on Location | Next.js | Page 1

minor crow Aug 12, 2022, 3:45 AM

#

Could set the location in a cookie, and then check that in getServerSideProps

plain field Aug 12, 2022, 4:03 AM

#

but how? have you seen the example website I shared @minor crow

#

Yes, I will set the Location in the Cookie, but my concern here is, that Location UI & then based on Location to render the Data using getServerSideProps() will be in the same Index/Home Page - @minor crow

celest lion Aug 12, 2022, 10:15 PM

#

@plain field Are you maybe accidentally attempting to recreate internationalization?

plain field Aug 13, 2022, 1:13 AM

#

I am not trying to recreate Internationalization, for more clarification & understanding, I'd share the URL of a Web App which I want to do the same for my Web App.

like when you hit the localhost:3000 which will be Index Page. then first of all it should ask for Location and once you gave the Location then that Location Page should be removed & all the data based on that Location should be populated/loaded using getServerSideProps(), is that possible @celest lion

celest lion Aug 13, 2022, 1:17 AM

#

Localization is a form of internationalization, so I would definitely suggest researching how next.js does it

plain field Aug 13, 2022, 1:30 AM

#

Location means, either from the Permission from Chrome to get the Coordinates/Current Location of the User or Entering Address manually, @celest lion

plain field Aug 14, 2022, 2:32 AM

#

anyone will help me??

plain field Aug 16, 2022, 2:05 AM

#

anyone can please help me???

plain field Aug 17, 2022, 2:21 AM

#

anyone?

lusty bridge Aug 17, 2022, 8:14 AM

#

I would suggest coding that witout using Next.js data fetching methods which seems to confuse you more than they help

#

getServerSideProps, getStaticProps are optimization pattern

#

you never need them

#

start with an API route and a client-side call like you would in any Single Page Application and then introduce optimizations when it's clearer for you

#

your time won't be lost because the code of the API route will also work in getServerSideProps if needed

#

getServerSideProps couples data fetching and React server side rendering which makes it powerful but also way harder to figure correctly than a traditional client/server call

plain field Aug 17, 2022, 8:20 AM

#

I agree, but APIs are residing in different/separate Expressjs codes, and I need this because of the SEO Optimization, and want the user Location (actual address either using JS Location Permission or entering it Manually) and then it should call the API mostly using getServerSideProps() and render the data @lusty bridge

lusty bridge Aug 17, 2022, 8:41 AM

#

it's not clear what's your issue is then

#

to trigger a call to getSSR you must reload the page with the relevant URL/request cookies

plain field Aug 17, 2022, 9:27 AM

#

if you open localhost:3000 for the first time, it will check Cookies or Redux Store that do we've the Location of the user (current location (like we do on Google Maps)), if the Cookies or Redux Stores value is empty then we should render a Page (Index only) which will ask for Location either using Permission or enter manually and if we get the Location then pass the value of Cookie or Redux Store to API using SSR and that too only for Index Page

#

do you know how we can do that? @lusty bridge

lusty bridge Aug 17, 2022, 1:19 PM

#

it's still not clear where it fails

#

I mean, what did you try and where did it fail

#

when you call getSSR, you have the context.req object

#

which contains cookies and stuff

#

you can then pass down the location as a prop of your page

#

and use that location to render what you want

#

no location => render a form

#

a location => render the right data

#

it's cleaner to use separate URL and redirections though for SEO, but the idea is the same

#on Index Page, render 2 UI based on Conditions & call the getServerSideProps() based on Location