We have created a web app using react native web. We want to add a server-side rendering to our app. We have added a code to render the page server-side, but it's not working, I can see the blank white page in the network preview tab and the server only sends my index.html file as a response.
I found some articles that are suggesting to use prerendering of the app.
To add prerendering to our app I tried react-snap (https://www.npmjs.com/package/react-snap), a snapshot is created but when I started the app it's only loading the first page(landing page) of the app, No events are working on this page(click events) and styles are also missing, there is no way to navigate in the app.
Expectations: The app should be server-side rendered, I should see the snapshot of the page in the network preview, the server should return a snapshot of the page in the response.
Can anyone suggest a solution to fix this?
Related
Server Side Rendering (in Nuxt, but I think this is fairly universal) has been explained to me as:
When using Nuxt SSR, you request an URL, and get sent back a
pre-rendered HTML page. After loading, the browser starts the
hydration code, at which point the static page becomes a Vue SPA application.
I presume (perhaps incorrectly) that regardless that you are now in SPA mode, if you request a new page (eg. you are on "blog/ten-blue-things" you follow a NuxtLink to "blog/ten-red-things") the browser sends a new request to the server for this page, and effectively break SPA-mode? Or am I wrong?
I really hope the answer is that it does not make a request. In my scenario all the required data is very likely already available, and if not the page would make an API call to get anything missing to dynamically render the new page "blog/ten-red-things". Fetching a pre-rendered page after the first fetch is wasteful in my scenario where everything is already on the client (to clarify this further, this is a PWA offline-first app; I'm adding SSR for the SEO and social sharing of pages).
However, I also wonder that if it indeed does not make a request, does that (generally?) hold true for crawlers as well? I'd rather they DO make a separate request for each page in order for them to get the prerendered SEO-friendly version of the URL. If a crawler has js enabled, it may execute the hydration code, and then what?
Can anybody clarify this perhaps?
Does it matter for this anwser if instead of SRR we employ ISG (incremental static generation)?
It does not break the SPA mode, once you've SSR'ed and hydrated, the app stays as SPA. You can notice the fact that you don't have any "page reload" because you're doing a vue-router client-side navigation (as to oppose to a regular a link navigation).
The rest of the app will still be SSR'ed properly, you will not go back to the server meanwhile (as to oppose to Next.js).
They are several ways to debug all of this thanks to some devtools + trying to disable the JS/inspect the source code. But yeah, crawlers will properly parse the SSR'ed content.
PS: you can also choose what kind of rendering mode you want for a given page so if you want some to be SPA-only, you can. The rest could be SSR'ed (during initial render) + SPA after the hydration.
SSR or ISG will not make any impact regarding crawlers/SEO.
It works differently from SSR of course, but the rendering part will be the same regarding the markup. Only the "freshness" will be different.
I have hosted a React app on Firebase and navigating via links and buttons works as intended (e.g. clicking the login button results in a route of "myapp.com/login" that shows the correct content). However, only refreshing the base url "myapp.com" yields a correct result. Once I refresh a non-base url such as "myapp.com/login" (not via link / button but via the browser address bar) I get the following error:
At the moment, I am trying to make an application with NEXT.JS. When I come to revalidate of page using method ISR. I very confused to understand how it works for the system or how is it auto to rebuild data of the pages in the system?
Many thanks.
You can think ISR as the combination of the SSR and SSG.
When you defined revalidate in getStaticProps, Next.js will generate the static HTML during build time because getStaticProps is exported.
When a user makes a request to the page, that Next.js app will serve the statically generally page. In fact, all the users will see the same page.
After the validation time is reached, the first user request to the page will make Next.js server-side rendered the page again. The generated page will be saved locally.
All users will be served with that newly generated HTML until the next validation. We then go back to step 3 again.
I trying to do app on facebook and All(.net button html button javascript button ) buttons dont work. I looked for another button which but it didnt used anymore! which buttton can ı use or how can add working button asp.net to facebook app??
Please help me.
If your Facebook app lives in an iframe then all buttons/controls including asp.net ones are supported. My recommendation is to test your app outside of the Facebook iframe on the server which your page lives and ensure that the event handlers are firing as expected.
If that works as expected on your server, then I would use a browser developer tool [F12 -IE/Chrome/Firefox] to see if there are any errors are present which would prevent the page from loading correctly and resolve those and you should be fine.
My tech stack: Node.js, express.js, backbone.js.
My web app is a two page app (you can hit two express routes to get fully rendered pages). Let's call them page A and page B. When I load page A and click on a link to load page B and then I press the back button, I only get a partially rendered page A (the part of the page that I can also deliver as an express.js partial with res.partial (not partial() within a template) via XHR).
From what I've debugged so far, pressing back in the browser doesn't hit an express route. When I inspect what Javascript is loaded there are no resources loaded. I was thinking I could do some debugging with the fronend routes (I'm using Backbone.js), but all I see is the partial HTML loaded on page A with no CSS styling and no JS resources.
Any direction on how to debug this issue?