I am trying to render my react app server side for better SEO and better performance but since most of the content of the site is from an API and the API call is still happening on the client side the server is returning an almost black HTML template is there a way to make the API calls in server
P.S. I'm not using Redux
It is exactly what React as client and Express as server must do.
When you choose to develop your frontend by React and use 'npm build' to get output from your whole React project. you get only "ONE" index.html file. so you can't render multiple html pages by Express. you can only render the main html file and use api's to render other routes.
That's why you can't do such a thing.
Related
Having some trouble understanding where to put html files and redirect. I'm very new to react and node js and just getting started with my first project. I have authentication working well, where my App.js in my client side has some inputs and it sends that info to node js server, which authenticates.
After authentication, should I send back a response to react so react can load a new web page? Or do I simply redirect to an html file on the server side? (res.sendFile...)?
Thanks
From my personal experience. You only use nodejs actually expressjs to read database, design api and expose api endpoint to the front end. On react part, you could call the api and also setup the proxy in the package.json file. Good example to follow:https://create-react-app.dev/docs/proxying-api-requests-in-development/
You could use it as reference.
I want to use react on my node.js website. Im using express and handlebars with this website. Is react supposed to be used on top of all that? Or should i not use handlebars or express with react?
Also what is your opinion on node.js? Is it a declining technology? Is there something else that is better for me to use?
React is a view library. Is mean to be used to build your entire ui.
Then you have two options you can use it to build a SPA - single page application - and consume data through network request to your server or render multiple pages each of those will be a react app.
Node + express are backend tech that can help you to build the server side of a web app here you can create some api endpoints to return data to the server and comunícate with the database.
Node is a very good choice as is still and will be used for long time and many companies.
I’m trying to figure out how to render landing pages of my react js and node js site to be optimized for seo. Right now I use react for the front end and a proxy to access node api at a different port. Any suggestions on how I can render landing pages server side would be great
You can use Nextjs for SSR.
Next.js is a JavaScript framework created by Zeit. It lets you build
server-side rendering and static web applications using React.
Here are some cool features Next.js brings to the table taken from Learn Nextjs:
Server-rendered by default
Automatic code splitting for faster page loads
Simple client-side routing (page based)
Webpack-based dev environmet which supports Hot Module Replacement (HMR)
Able to implement with Express or any other Node.js HTTP server
Customizable with your own Babel and Webpack configurations
I'm currently working on a new ReactJS application. In all the previous applications I've built I used Express for the server side rendering. I used Express because routing in production mode wouldn't work if I didn't.
So I've recently discovered that it's posible to just always redirect my React app to my index.html file and let the React routing just do it's work. This also works when I deploy my application to production.
I know Express can be usefull for SEO porposes but other than that I have no idea why I would need to use it. So am I just missing something? Or is it just fine to don't use Express with my React application if I don't need any SEO.
React configured as a Single Page App, renders the express routing all but unnecessary. The standard transition from a web server rendered app to a single page app is to change the server into a REST Web API and any server side data needed from the React App is obtained through AJAX calls.
So in most cases you don't need Express when you are using React to handle your routing except for in less common cases when you might want to use express as a reverse proxy or something.
If you want to do server-side rendering, you'll need a node server (typically but doesn't have to be express) to render your React components. This could not only help with SEO but also allow your page to appear to load faster (you wouldn't have to wait for the JS to download and run before the user sees the HTML).
If you don't care about the benefits, don't use SSR.
when deploying react application it is just usually an html and a JS file. So you need some kind of server to host it. Luckily there are services out there that offers that like S3, Github etc.
You're using Express because it can host the html and js files. So technically you don't need specifically express but you need some server that will host your files.
I'm building a web application using node.js, this is my first time working with node. I'm using express framework and I have a question about client side rendering.
All the tutorials that I have found online talk about express and server side rendering. They talk about how you can use jade the express templating engine, to serve rendered templates as reponse to your web application.
My application is going to be client heavy and most of the rendering will be done client side. I want to call server to just get plain JSON response and then render it client side, so server side rendering is not of much use.
In this case, is express a right choice? I really like the way I can write APIS in express but I'm concerned about how to serve my application. If I don't want to use the server side rendering it would mean that I would have to serve static HTML at the first call which seems weird to me.
You might want to try Emberjs if you want most of the work done on the client side. But still, you need to send the data to the client so one way is to build your app totally on the client side just by sending a plain html and working your way up there. You can also precompile jade
What you are describing sounds like you are searching for an javascript MVC(or other) solution.
There are a lot of possibilities. Take the right tools for the right job.
Try the following link to get an nice overview of what is possible.
Helping you select an MV* framework