I am using React and Express. I am doing server side rendering, for the first load for any of my routes.
This routes are something like "/contacts", "/aboutUs" and so on.
Now I am doing API POST and GET request with Axis and hitting endpoints like "/api/contactForm"
When someone visits this route in Browser, there is nothing there.
Is it possible or actually is there any need doing SSR from the responses that this API gives me?
For example, I visit "http://mydomain/contacts" page and that page is server side rendered. On that page there is button, and when it's clicked it uses Axios to make GET request for some data in Express on a route "/api/myData". I return the fetched data to client and show it on "http://mydomain/contacts" page.
Can the data that is being returned be server side rendered (SSR). I don't see what would be the benefit but to ask just in case?
Related
As next.js leverages server side rendering, little confused about how its improving the response time of the page navigations after the page load of the websites. This is after the first page load when user tries to access links or different routes in between.
My assumption is, when a user visits a website at first the next.js server sends the HTML build and the react renders within milliseconds, as the java script conversion is done on the server side.
Now if the user clicks on a link, when he is redirected to a different route, does the request to the server happen? How are we getting the processed javascript to the new pages/content? Again hitting the server?
Or
As the entire React code is considered as single HTML DOM, the navigation is not hitting the server again. If thats the case the server needs to render the HTML only once in the entire process.
Could some please confirm whats happening when the user tries to navigate between pages/links in a React app integrated with Next.js after the initial loading
I am running into a very sporadic issue. It doesn't happen often but, in our React application, history.push(URL) does not always work as intended.
Typically, history.push will be handled by the React UI to navigate between React routes - it won't send an actual page request for whatever the URL is. 99% of the time this works perfectly fine - however, we are seeing cases in which history.push(URL) is actually sending PAGE REQUESTS to the server. This results in a 404 Not Found error.
Here is the code snippet:
this.props.history.push(`/live?watchNow=true`)
In what scenario should this actually happen?
You are changing the UI to /live route. Since React is a SPA (in case you do not use Server Side Rendering), it won't make a request for a new page to the server. But if you refresh the page with /live?watchNow=true, you browser will make a request to ressource/live?watchNow=true with parameter watchNow, nevertheless it should show up.
By the way push from useHistory do not make HTTP request (Docs), so check elsewhere.
I am serving a production build index.html of react from an Express server. The react app uses react router for navigating. When using react router, there is a problem that when refreshing the page, it can not get the data anymore because it is sending GET request to http://example.com/abc and that URL is not handled in express. So I found the solution by handling every get request: app.get('*') to redirect back to the home page so the page can get all the resources it need. However, I have other end points in express that can send data to the front-end and if I redirect all GET request that end points does not work anymore. How should I solve this ?
So I found the answer by moving the app.get('*') below any other GET end points
I'm developing a project that uses dynamic URLS like [slug].js what I'm trying to do is: when someone access some url like domain.com/my-post my page should query for available slugs (that contains data like SEO metatags) in a graphql endpoint and load the page if the url exists in my database.
I`m using SSR, apollo hooks and etc.
My question is: on production when someone share that url on facebook or things like that the metatags on that url (domain.com/my-post) will be the empty ones (before query looks for available slugs) or after the metatags and contents was full filled? considering that when I use useQuery from apollo I need to return something in order handle loading and error from that query. I'm some point when users access that url will show a "loading" message.
My question is: on production when someone share that url on facebook
or things like that the metatags on that url (domain.com/my-post) will
be the empty ones (before query looks for available slugs) or after
the metatags and contents was full filled?
It depends on where you make the request for the slug.
If you make the request server side (ex. inside getInitialProps) pages will wait to fetch data before pre-rendering, that means that when the page will render, it will render with metatags.
If you are following the with-apollo example it should render server side obviously only if you are using your HOC in pages else if you are importing your HOC deeper in your component Tree, getInitialProps will be ignored (since it work only in pages)
I am a meteor user and I want to know the difference between express and react router Dom. When I used meteor, I would render a component that contained the browser router and routes. But I am kind of confused why people are using express with react when they can use react router Dom. Is it a preference thing or is there benefits to one that the other does not have? Or am I just wrong and they are two separate things? Please explain the difference of the two and how they would be used differently.
Express
Express works on the server-side. Specifically, it runs on top of node.js
Express is a 'web application framework', and can handle routes, accept client requests, retrieve data from databases, prepare views and send back responses.
Note once again that all of that is on the server side.
React-router-dom
React-router-dom is a client side routing library.
You might be aware that in Single Page Applications, when a user navigates to a link, a request to the server is typically not sent. Instead, the client side router (like react-router-dom) interprets the request and show appropriate content (eg: a specific react component).
To answer your question why people use express with react could be
to serve your index.html and your bundle.js files, when a user first visits the site, (www.example.com)
to redirect the user to www.example.com when someone directly visits www.example.com/subpage, which is typically handled by react-router-dom on the client,
to serve static assets like icons and images on your page
as an API backend for getting data from the server, etc