Server-side Rendering React from Scratch! (Server-side Rendering with JavaScript Frameworks)

Рет қаралды 121,146

Күн бұрын

Learn how to set up server-side render with your React app and put it out on Firebase Hosting. This setup uses Webpack, React DOM Server, and Babel to create an app that can run both on a browser and a server. We'll use Webpack to manage and bundle our JavaScript files and other dependencies. Then React DOM server will provide a "virtual" implementation of the DOM so you can create an HTML string version of your app. Then finally you'll use Babel to write modern JavaScript syntax and convert to commonjs module system on the server.
Serve Dynamic Content with Cloud Functions: goo.gl/dcbtkO
Watch more Server-side Rendering with Javascript Frameworks: goo.gl/yaYkHX
Subscribe to the Firebase Channel to never miss a Server-side Rendering episode: goo.gl/9giPHG

Пікірлер: 113

@pakpoomtivarkornkit8525 6 жыл бұрын

server side rendering code start at 11:33

@finncrisp9900 6 жыл бұрын

Nice! Javascript has really come a long way. Nice to see that the language is maturing and by combining it to the awesome tools like React and Firebase development becomes just a breeze and a pure joy. Keep it up guys!

@1414tyty 6 жыл бұрын

Beautiful React SSR Tutorial

@FabianVilersBe 6 жыл бұрын

You should use npx to execute binaries from the .bin folder. Npx will help the node runtime to select the right binary for you. Moreover, the syntax of your scripts will be much cleaner.

@cauebahia 4 жыл бұрын

Thanks for this tutorial. BTW, a tutorial on how to bundle cloud functions files using Webpack would be great!

@AndresVillanuevand 6 жыл бұрын

Awesome guys.. Really helpful!

@clearwavepro100 6 жыл бұрын

Awesome thanks for sharing this!

@kikevanegazz325 Жыл бұрын

Excellent tutorial!

@cplkickass 4 жыл бұрын

If you guys could share a repo of the finished product of these examples that would be so helpful ... makes it way easier to track down why something isn't working when you though you followed along perfectly!!!

@HoomanAskari 6 жыл бұрын

Finally, the react episode. Thanks. But what about routing and flux/redux state?

@alexanderprisazhny2812 5 жыл бұрын

The approach I've met is to import store in server and pass its contents through a global variable (e.g. window.INITIAL_STATE=${store}) in index.html you pass to a client.

@jantomotulo3754 3 жыл бұрын

Hi, im currently looking for this too, if you dont mind if there any example for this please reply this comment with the source for the example. Thank you

@dongronki 5 жыл бұрын

if you use babel 7 (current ver), you need to change different dependencies in "package.json" "devDependencies": { "@babel/core": "^7.3.4", "@babel/preset-env": "^7.3.4", "@babel/preset-react": "^7.0.0", "babel-cli": "^6.26.0", "babel-eslint": "^10.0.1", "babel-loader": "^8.0.5", "babel-polyfill": "^6.26.0", "eslint": "^5.14.1", "eslint-plugin-import": "^2.16.0", "eslint-plugin-jsx-a11y": "^6.2.1", "express": "^4.16.4", "firebase-admin": "^7.0.0", "firebase-functions": "^2.2.0", "firebase-tools": "^6.4.0", "webpack": "^4.29.5", "webpack-cli": "^3.2.3" } and ".babelrc" file { "presets": [ "@babel/preset-env", "@babel/preset-react" ] }

@sulenchy 6 жыл бұрын

what advice would you give a beginner developer on server side rendering ?

@Webeli 6 жыл бұрын

Awesome!

@soultouchingsongs 6 жыл бұрын

Thank you so much.... 👍

@greatnile 6 жыл бұрын

Nice tutorial, one note though, locally installed binaries are available for all scripts in your package.json without prefixing it with node_modules/.bin/binary-name so in webpack script you could've written webpack directly.

@vcamargo1000 6 жыл бұрын

Also, if you were in the project directory you could invoke the node_modules binaries from the terminal with npx, like npx webpack. I believe npx is available from Node 8.

@greatnile 6 жыл бұрын

Vinícius Camargo that's cool!

@gligoran 6 жыл бұрын

npx is bundled with npm from npm@5.2.0, but you can install it to just like any npm package even on previous version of npm.

@narisongandy 6 жыл бұрын

I created a github repository to implement the source code for the Firebase tutorials. The source code for this video is here: github.com/littlewhiteball/FirebaseTutorial/tree/master/Server-sideRenderingReact Welcome to add more source code for other videos to the repository! Let's share and make it easier for others :)

@heratpatel7174 6 жыл бұрын

How to use ssr for specific component in React ?

@pm_calabrese 6 жыл бұрын

Would be interesting to see preact SSR

@MrKausti 6 жыл бұрын

You guys should really put the code in your videos to git. I love these and need these but being a beginner I have to watch multiple times. Would really help to have the final code to look at. Cheers.

@ishanmahajan7264 5 жыл бұрын

Can you make a similar tut for angular as well I'm hitting my head against wall since past few weeks but no success. I tried tapping keyboard as well though.

@myaccount09011975 6 жыл бұрын

Really like the video. Could you please share the themes you had used ?

@kephas-media 6 жыл бұрын

Thank you!!!!!!!!!!!!

@behnammohammadi5820 6 жыл бұрын

how transpile css file when use import './App.css'; in server rendering

@bharatsahu184 4 жыл бұрын

got any solution Mr Behnam?

@mycloudvip 6 жыл бұрын

HI, great Video... I always struggle fetching json data, selecting objects and injecting those values into html and now that I am getting started with react-native it seems a bit more complex. Can you suggest a website or webtool where I can experiment with different fetching tools to request API data, so that I can become more familiar and experienced handling json files and API requests? Thanks

@gemsy.net.reviews Жыл бұрын

Hi, i came a cross this video since im searching for dynamic tags for my web app.hope this is a good step and gonna now to searching how to combine all these benific things with my project .Thank you very mutch

@JFkingW 5 жыл бұрын

Is that basically what next.js does automatically for me?

@kawerewagaba597 3 жыл бұрын

i guess so...

@davidfu8174 6 жыл бұрын

Can you make a new one with create-react-app?

@silviumarinescu2796 6 жыл бұрын

how did you put index.html in the functions folder ? as far as i know you can not access it in the public folder from functions

@bharatsahu184 4 жыл бұрын

got any solution for this?

@anantrungta7984 4 жыл бұрын

Same Error- Error: Error occurred while parsing your function triggers. Error: ENOENT: no such file or directory, open 'E:\thisisme\SSR\functions/index.html'

@bharatsahu184 4 жыл бұрын

@@anantrungta7984 have you tried nextjs? it's easier than customising react for SSR.

@pliavi 5 жыл бұрын

Oh well, it's look like a big gambiarra :v And i didnt' understand the need of the ./functions folder and why create it "manually", it can't be done with webpack? and webpack didn't transpiled the file to use commonjs require?

@juanyang838 4 жыл бұрын

Are there any difference between isomorphic-fetch and normal fetch? Seems like an usage and a syntax are same

@jibin2706 5 жыл бұрын

Dont you have to authenticate before fetching the data from firebase?

@MichaelSalo 2 жыл бұрын

I followed most of this, except why a separate copy of all the component scripts? Can't the client and server use the same build files. They both have to transpile anyway.

@andrevenancio 5 жыл бұрын

Been following this tutorial from the beginning. "firebase serve --only functions,hosting" command runs, but I dont see a SSR version. I see what I have on the public folder. Either something on the firebase api changed, or you're missing something...?

@ReedRizzo 4 жыл бұрын

I had the same issue. Remove the index.html file from your public folder. It's taking preference over your cloud function. At least that was my issue.

@codewithsub5083 5 жыл бұрын

How to ssr for multipage app?

@alexanderhemming6148 4 жыл бұрын

The webpack parts are entierly depricated

@MehranTaherimoud 4 жыл бұрын

Anyone knows the link to the source code repository of this project?

@matinsasan 5 жыл бұрын

Hey David East, I found your doppelganger on youtube, another youtuber with a German channel named Die Frage, and he's German. I sent him a comment to make a video about meeting you in US (or you him in Germany, who knows). I hope he reads my comment there and takes interest. I hope you take interest too. Might be awesome.

@n37-d 5 жыл бұрын

hey, what font are you using?

@alexnezhynsky9707 6 жыл бұрын

7:54 Could also match for an optional "x" character in your regex, so you only have one test, e.g. /\.js[x]?$/

@LuisCassih 5 жыл бұрын

the optional [] is not necessary neither, the ? applies to 1-0 ocurrences, so using /\.jsx?$/ is valid too

@alexanderhemming6148 4 жыл бұрын

16:24 change the second node_modules//bim/babel ro just babel. It will not currently work otherwise.

@anujsinghanujucan 5 жыл бұрын

⚠ ReferenceError: self is not defined, gives error when i run `node_modules/.bin/firebase serve --only functions,hosting`

@harshitpant3067 6 жыл бұрын

no need of including node_modules/.bin in npm scripts. npm do that for you.

@behnammohammadi5820 6 жыл бұрын

nice

@thelotus-zv9qz 5 жыл бұрын

Please make a video Server-Side Rendering Vue

@troooooper100 3 жыл бұрын

how do i get my vscode to look like this

@greatramu86 6 жыл бұрын

@13:25 - what happens if a new "fact" is created in database and user opens the URL? Will the server cache still be active and show the old data only? How can I invalidate server cache?

@ValAllenSamonte 6 жыл бұрын

Yeah I think it will serve the old data for a certain period, however the client js will probably be executed at some time and will replace the server side rendered html with the actual react app on the browser (of course with the updated data).

@greatramu86 6 жыл бұрын

that is what I thought too.. however if we plan to use this for say "public profile" page, it will not be nice to ask user to wait 10 min to see his/her changes. I can reduce the cache duration, but it will kill the purpose and end up using too much resources. Does anyone know what could be the best solution here?

@ValAllenSamonte 6 жыл бұрын

I mean, once the javascript on the client is executed, it will replace the server rendered old data with the new data. JS execution on the client will mostly take less than 5 secs to render, so users will just have a glimpse of the old data and will be immediately replaced by the new data. At this point, the caching is probably not an issue.

@larsfroelich 11 ай бұрын

How do you exclude specific components from being rendered on the server-side?

@sharps8726 4 жыл бұрын

11.03 is that a webkit you are running on your Local Host?

@anantrungta7984 4 жыл бұрын

Getting this error -Error: Error occurred while parsing your function triggers. Error: ENOENT: no such file or directory, open 'E:\thisisme\SSR\functions/index.html' After firebase deploy- coz there is no index.html file in functions folder. HELP!

@anantrungta7984 4 жыл бұрын

Solved : Write it manually gyuz

@shubhendraraj114 6 жыл бұрын

hey, if the public folder doesn't contain index.html , I am unable to deploy the on firebase. Firebase is giving internal server error. But if I add index.html in public folder, than SSR not working. Firebase is serving from bundle.js. I am unable to see dom element in view source. Can anyone help me ?

@sabashavidze4990 Жыл бұрын

you can get this file path.resolve(__dirname, "..") + "/public/index.html" by getting the sibling folder first and then index.html

@devmrin 6 жыл бұрын

at 5:03, how do you get your arrow function to look like ⇒ in vs code

@davidpotgieter4943 6 жыл бұрын

⇒ github.com/tonsky/FiraCode/wiki/VS-Code-Instructions 🙌

@JohnArcher888 6 жыл бұрын

Mrinmay Mukherjee google "vscode ligatures"

@tininottiny8685 2 жыл бұрын

What font are you using on vs code, so legible😁

@riskingeuphoria 4 жыл бұрын

That stuff at the start pre 11 min. is that basically what "create react app" does?

@shamim083 3 жыл бұрын

just creates a react app. Install the node js and run the command to create a new react app.

@kawerewagaba597 3 жыл бұрын

pretty much

@96shahab 6 жыл бұрын

What font are you using in this video?

@b0mav1 6 жыл бұрын

Fira Code

@BearkFearGamer 5 жыл бұрын

Nice but, im using create-react-app

@AmitErandole 6 жыл бұрын

Where is the link to the github repo?

@danielr.4511 6 жыл бұрын

github.com/davideast/react-ssr-firebase-hosting

@juanyang838 4 жыл бұрын

is this tutorial outdated? most of packages get deprecated warns and won't run

@stianmaurstad 6 жыл бұрын

Ok, I am a newbie, but shouldn´t you explain why we would need this? Understanding why & with some quick history or background would help, rather then just deep diving. Great video though.. Thanks!

@mjabadilla 6 жыл бұрын

kzfaq.info/get/bejne/fbeqoZqJt8reqI0.html

@tugceakn9742 6 жыл бұрын

The most important reason is usually SEO. Search engines besides Google have problems rendering SPAs.

@clublati 6 жыл бұрын

This is just a useful tutorial on deploying to Firebase - if you use that. And I believe the main reason for SSR is performance.

@gabrielmedeiros9806 2 жыл бұрын

I agree with you! People forget to explain why

@drantunes 6 жыл бұрын

SSR vs PWA? Is possible to use SSR with PWA?

@cyrftube 6 жыл бұрын

You can use them together. SSR is just responsible for the HTML response to the initial page request. PWA is supported by fetching a Javascript file in a separate request. Once the JS for PWA is installed locally, you can avoid making the page request.

@oguzgurkanbilir1368 2 жыл бұрын

You better start from the invention of the alphabet!

@Andy-si1pl 2 жыл бұрын

IS this still relevant or is everyone using Next (which I a trying to avoid)

@fahad.hossain 3 жыл бұрын

please make a new video on this.

@brunomello7499 2 жыл бұрын

yeah, rendering to string is a terrible idea if you have a big chunk of content on your dom. Ideally you should render to a node streaml so that you can split your html into small chunks and have them quickly sent out to the client in order to reduce the time to first byte

@torbenlarsen4396 6 жыл бұрын

Source code?

@narisongandy 6 жыл бұрын

You can check the github repository I created for the Firebase videos: github.com/littlewhiteball/FirebaseTutorial/tree/master/Server-sideRenderingReact

@aoijeka 6 жыл бұрын

thanks!

@vipulhirani831 6 жыл бұрын

Provide git repo for beginner.

@carlbowen 5 жыл бұрын

github.com/davideast/react-ssr-firebase-hosting

@aichpvee 6 жыл бұрын

"Webpack is RUN on Node." Are there any programmers other than me who can get this right? You'd think people who spend their entire lives working with grammars and syntax would be able to use grammar or syntax...

@user-vc2jn4td2e Жыл бұрын

19:34

@shamim083 3 жыл бұрын

In a real app, we never pass props to the App component!. Looks like it serving a static html page.

@DanielRLuke 2 жыл бұрын

The explanations are, to me. not clear. How is it that React not already rendered by a server? When you go to a URL, aren't you requesting info from a server? As usual, the tech person trying to explain what something is overlooks this extremely obvious point of confusion.