React Server Side Rendering Introduction For Beginners - ReactJS ssr with Expressjs
HTML-код
- Опубликовано: 1 окт 2024
- 📘New Course: Build full-stack React Typescript applications tsreact.maksim...
Learn how to setup basic server side rendering using ReactJS and Express.
Follow me on Odysee: odysee.com/$/i...
React SSR (Server Side Rendering) is a technique when you pre-render initial state of your application on backend.
It can greatly improve user experience if used correctly.
🐦 Twitter: / ivanov_dev
I write about React and TypeScript there
Code for the tutorial: github.com/sat...
this is the most straightforward to the point tutorial i've ever seen just amazing bro
Still works. Preparing for interviews, and am looking for easy ways to implement SSR, other than NextJS.
Side for everyone else. Your Index.js on the client-side will look slightly different to the video now:
import { hydrateRoot } from "react-dom/client";
const domNode = document.getElementById("root");
hydrateRoot(
domNode,
);
Happy coding
какой классный тяжелый русский акцент, чувак ты ахуенен
Once again, you uploaded an extremely short video, which is lacking so many explanations, and showed stuff that doesn't really work or apply on a full-scale real world applications. Why even bother with these short videos? To who this contributes?
Simple code! Love it. Could you make a tutorial how to use it along with React-Helmet? Thanks!
It works fine but i have a little problem. My dotenv-package isn‘t working anymore after implemented react-ssr, do have someone a Tip for me to fix it?
I am using react router and getting error when I am trying to run in SSR mode
For those who would wonder how to update the website after you edited the app, simple rebuild it then re run ssr
syntaxe: "node_modules" and not "node_module".
Nice. It would be awesome and then I would subscribe if you took the time to explain why you do it this way. Maybe not every line, but for instance why replacing, why installing hydrate etc
Хорошее видео, четко и по делу без лишней воды, шуток-прибауток и мычания!
exactly
@Snake ETH лично я дохуя чего не понял, но я ни разу не лез в бек, поэтому хз в ком проблема
greate, but how should put it on cpanel host?
Great video! You simplified it a lot compared to some of the other articles/videos I watched for React SSR.
Yeah!
This is great thank you. I see how this renders the HTML on server side. A question is why do we want to ignore styles?
If you watch the whole video, you'll see that inside his server/index.js file at the first line he uses require('ignore-styles'); which is used just to ignore the style
@@baraousseni1686 Yes but ignore the style?
Hello, friend I liked this approach for React SSR, it is very easy to understand, but I could normally use Redux, ReactRouter and Styled-Components, you would have a video that integrates these three points (Redux, ReactRouter and Styled-Components in React SSR)
+1
since ReactDom.hydrate simply makes the components from the client use the HTML generated from the server, it should integrate without any problem with other dependencies.
you look like theon greyjoy from game of thrones any way nice explanation
this doesent work if you have async functions in your projects... Thats means its real hell to get this setup work in this way if you have a lot of components with advanced instructions inside such promisess and async things around.
Thank you so much, bro, this video is very helpful for all, and your understanding way is ossom, thanks for sharing this, I request to one thing please can you make a video to CSR to SSR in vuejs, if you do please reply me, thanks a lot.
Widget-base WP Theme development Series:
ruclips.net/video/T-ZFL9pEpa8/видео.html
63/5000
It worked is that I have to run yarn build and then yarn ssr
- I dont remember if it is default import
* checks *
no it is not,
* checks again *
yes it is.
Typical developer moment 💀💀
🤩
Can you please explain how to create SSR with Routes ? Especially with Router-V6 &&
Dude, everything's great and appreciate you for the tutorial, but couple of things are bugging. First, can you make an example with the running react development server rather than build and second using this, it's giving me error that "require is not defined". please help me out with this.
If Error "React undefined", then "Import React" in every component file specially if you are using React17+
Thank you! 🙏
you look like the guy that kills John Wick's dog. joke aside this video is really helpful.
How do you copy an entire line without selecting all the text?
how do you select an entire line in a mac?
how do you copy a line declaring a function and then only change the name of the function by deleting the entire word?
all those shortcuts man, I'm new to macOS and I don't use VSCode as much, they'd be helpful
This video is perfect! Very simple and straight to the point.
That is working on local server, thanks for making it,
but when we run npm run build, and then npm serve cmd to check dist folder is working or not, it giving me an error (Uncaught TypeError: n.createRoot(...).hydrate is not a function)
please anyone help me
I think it does not work for me. Because I did everything, but when I clicked "view source page", it did not change
Thank you! now I have an image how to use ReactDOMServer and ReactDOM.hydrate guy :D
LocalStorage WrongReferenceError error, how can I insert normal js function,
Thank you for this tutorial. Its great! How to add meta tags into the head of the pre-rendered html file, if we replace only root div?
Does it still works if i put it in a diferent directory after running npm run build?
Then I'll have to pass my pc to users to access it or I'll give them link to my localhost
Лучше конечно указать targets в preset-env чтобы бабель не трасниплил лишнего и не было проблемы с полифилами.
require('@babel/register')({
ignore: [/(node_modules)/],
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current',
},
},
],
['@babel/preset-react'],
],
})
node_modules was misspelled in the ignore section.
good video. Can you have TypeScript version?
I’m wondering how to deploy this set app
I got an error React not found when running the app. Could you guys help me please?
If i want to do server side rendering for specific components, is that possible?
Is this indirect solve for SEO problem ?🤨
I don't know how it will work for the content pages that we are fetching from APIs
what do you write on minute 9:11? Mine's not working and I don't know if it's because of that
But that not will be useful when you have created a huge mern app
window is undefined , how to solve this problem? pls tell me if anyone knows
great tutorial but your bottom right corner video layer often covered up the code😥
Kindly Make an other video that how can we use react helmet with ssr??
Hoy can you tell me how to deploy it? Thanks!
Best video i just glad to know your channel
how can i use css with this tutorial?
Does this method work on low version of react as v10 ?
how to render react for differend routes in the same server ?
Hi, but this method don't render elements after fetched :(
Hmm, could you please elaborate, what elements?
@@satansdeer1
Hello Maxim, i used axios in componentDidMount. I create table body with the data when bring the result, but unfortunately the created elements not rendering after fetching. I'm leaving the github link below
github.com/Emgeomap/react_ssr
just crazy how much work is required to make this work, i have that you cant just take a already created page and say "this now react SSR" and then it works on your current code
Error: Cannot find module '/mnt/c/PROJECTS/right now/ssr-example/server/index.js'
Error: Cannot find module 'app/theme'
Require stack:
- D:\F88Projects\WebPartner\src\App.js
- D:\F88Projects\WebPartner\server\server.js
- D:\F88Projects\WebPartner\server\index.js
I get error when run ssr ??
Please help me!
Do we only need use hydration on root?
Can you give an example with using an API to get the data and render that data server side?
This's not working because i tried (Sorry if my english is bad)
how to deploy this app on cpanel
perfect i love it, but how can i do it with react typescipt template !!! i have some problem
hi, actually i am finishing writing js but i have some problems. return res.status(500).send("something"). How can I solve it? can you help me?
yarn ssr, modules not found
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type function ([Function (anonymous)])
at new NodeError (node:internal/errors:329:5)
at validateString (node:internal/validators:129:11)
at Object.resolve (node:path:147:9)
at E:\Web Projects\spacex\server\/server.js:12:22
at Layer.handle [as handle_request] (E:\Web Projects\spacex
ode_modules\express\lib
outer\layer.js:95:5)
at trim_prefix (E:\Web Projects\spacex
ode_modules\express\lib
outer\index.js:317:13)
at E:\Web Projects\spacex
ode_modules\express\lib
outer\index.js:284:7
at Function.process_params (E:\Web Projects\spacex
ode_modules\express\lib
outer\index.js:335:12)
at next (E:\Web Projects\spacex
ode_modules\express\lib
outer\index.js:275:10)
at expressInit (E:\Web Projects\spacex
ode_modules\express\lib\middleware\init.js:40:5)
getting this error
what is theme of vscode?
tks for the sharing!
When m using Routers in my App.js after hitting localhost:8000 it's giving me an error Browser history needs a DOM
@Maksim Ivanov How to put this code on production mode on hosting server because we are just putting build folder content on server how server/server.js read App component is this case?
That's what I'm wondering too, did you find the solution?
@@thatcoul we have to put all folders on to server. Like we setup on local as same we have to setup on other server like digital ocean node server etc.
@@kalpittandon8999 Thanks
@@thatcoul any time
import logo from './logo.svg'
the above is not working. Image is not being loaded into the browser. Could you please help me with this?
Simply delete both JSX tags mate along with the logo.svg file
Then it should work (:
по сути мы юзаем реакт как эдакий шаблонизатор. В случае с использованием React всё просто. Было бы круто увидеть сср с подключением Redux - там уже не всё так очевидно ))
Да, можно watering редакс стора рассмотреть
Man You are a Code God.😎. Thanks so so so much. But one more question. Do I need to build my create-react-app anytime I make changes to my Code?
2022, the code in the repository doesn't work. The explanation is very good, unfortunately it doesn't work in you clone the repo and run it locally
How to deploy this
sir showing error Warning: Expected server HTML to contain a matching in .
man - this is a headache!
Hi thanks for video but i have a issue like:
ssr: `node server/index.js`
problem with npm. There is likely additional logging output above.
nice nice nice nice
react-snap is shit doesn't work as needed
What is react-snap?
Hey dude, I don't get from where the build thing comes, can you explain? Like there is no build folder in the repo at all
Will withRouter HOC from React-router-dom work in server side rendering as well?
Maksim, how to resolve "ReferenceError: document is not defined" in this implementation ?
thanks for all
👏
If you're reading this comment, do yourself a favor and search for next.js. You're welcome.
thx very much for the tutorial. But what about navigation ? how can i produce SSR with many pages in react ? Thx
Hi , The above code works well in the localhost port :8000 but not in production, how do we enable in production mode?
things are going pretty fast here. I'm not sure whether it's good
Simple answer, it's not.
Most of it doesn't apply to real world applications, and you can't really learn from it.
very good solution. is it works redux case?
God bless You !
If You would be so kind as to post some extended material using routing, that would be nice
I got this to work on the all new "bun.js" runtime, no need for babel but I had to do some modifications. Good Tutorial, thanks
Maksim you are Molotok! How do we deploy it? Usually I upload build content to server, but what should I do after your tutorial?
did everything like in a video, "Reference Error: React is not defined", might versions are not matched or something missed ;)
Nice
Hi there, does this solution generate html on the serverside? It's not quite clear from the video if it does. Last question can it generate html for a specific component within the react app?
This helped understand SSR better, thank you
Can you talk about why would someone go fully this route vs nextjs or gatsby?
Просто великолепно, начал сейчас учить реакт в связке MERN и мне очень важен SSR для СЕО, а тут все так понятно, спасибо за качественный контент)
А этот метод Вам помог? Для меня тоже очень важен ceo, а писать приложения на next js не особо хочется
@@МаксВолков-э6и Добрый вечер! Этот метод в итоге не пробовал, решил использовать Next.js, всё таки это более распространенное решение, много примеров как и что правильно делать
@@sanyokes Спасибо за ответ!
I think I just learned THE DIM MAK on this page... thank you so much, you are LORD!
Great. Thanks. What does ^/$ mean exactly?
Can redux and routing be used?
Support for the experimental syntax 'classProperties' isn't currently enabled , getting this error