The Drawback of Client Side Rendering

Подписаться 497 тыс.

Просмотров 181 тыс.

50% 1

Client side rendering is cool until you want to do something that it can't do...
----
Checkout my side projects:
If you're into cooking: www.mysaffronapp.com/
----
Join the Discord: / discord
----
Patreon: / benawad
----
Follow Me Online Here:
Twitter: / benawad
Twitch: / benawad
GitHub: github.com/benawad
LinkedIn: / benawad
Instagram: / benawad97
#benawad
TikTok: / benawad

----
Follow me online: voidpet.com/benawad
#benawad

Наука

Опубликовано:

11 июн 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 453

@willmakk 4 года назад

Your metaphors are next level.

@keith6293 4 года назад

here's your big mac.

@arturfil 3 года назад

Aaaah I see what you did there...

@dickheadrecs 3 года назад

🎈 🏠 🎈

@alexcc316 Год назад

"you are not a karen"

@navneethsubramanya.8465 4 года назад

Ben's got 99 problems, but a girlfriend ain't one.

@phantomKE 4 года назад

Bruh! He says it with a straight face

@navneethsubramanya.8465 4 года назад

@@phantomKE I know right? He just leveled up with these jokes!

@abdulazizs824 4 года назад

🤣🤣

@blipojones2114 4 года назад

jokes aside, he's not a bad looking dude at all, getting jacked wouldn't hurt tho, as long as he doesn't covert to a life coach and talk about it non-stop like that other coder youtuber John Sonmez.

@malvoliosf 4 года назад

He has a girlfriend in Canada.

@programming2249 4 года назад

I avoid client-side rendering in order to save CPU cycles for cryptocurrency mining.

@r0ckinfirepower 4 года назад

hahaha

@TechdubberStudios 4 года назад

hilarious comment! but crypto mining is an inefficient form of revenue on client's computer, see TPB case experiment.

@ezshroom 3 года назад

@@TechdubberStudios It may pay less than ads, but it's many times better. I support websites that responsibly use cryptomining, and I block ads. Please, don't say that ads are better. They have never been any good to anybody's web browsing experience. Oh, and you can use cryptomining along with Arc, another earning method that does not involve ads. I'm done with Google's creepy trackers. Cryptocurrency mining is the future.

@TechdubberStudios 3 года назад

@@ezshroom I am genuinely 100% with you on the crypto movement. I hate ads. Always have hated them. But there are at least 2....3 big corporations that come to mind that were built on the ads business model, but with crypto mining... can't find one. And browser-crypto-mining is not exactly a new technology. I really want it to replace ads. I really do. Hate the pop-ups, spying, tracking, that's going on. And the first corpo that comes to mind would be Netflix, when considering whom should adopt the crypto model. Because the users stay on netflix and binge-watch hours and hours!

@TechdubberStudios 3 года назад

@@ezshroom also, do you happen to know any website/forum/subreddit focusing on browser-based mining? I would really like to join and dig in more into this subject.

@evans8245 4 года назад

solutions: 0) pre-rendering with parcel or webpack 1) server side rendering

@archmad 4 года назад

your solutions are not client side rendering. he mentioned it.

@shaftsbury120 4 года назад

Fantastic job explaining this! As always, the hilarious dry humor and "next level" metaphors help drive home points and keep things entertaining. Really helped clear up a bunch of stuff and get me pointed in the right direction. Many thanks!

@Silver_Knee 3 года назад

I avoided serverside rendering a meta tag by registering a sub-domain, doing the serverside-rendering there and making my app only compatible with a set number of user-agents. Brilliant!

@dawid_dahl 4 года назад

This channel is slowly becoming one of my favorites on RU-vid! 😄

@salshouts 4 года назад

This helped me alot! I am working on a project and my backend was almost finished. I was using create-react-app with router but switched over to next.js! Thanks alot

@CarlosMartinezTech 4 года назад

I like how you explain, well done. Thank you for the quality content.

@stephenyin3509 4 года назад

Love the joke about girlfriend and client side rendering at the beginning

@samsonbrody6308 2 года назад

Great video. Trying to wrap my head around server side rendering and this video definitely helped

@diegogimbernat9253 4 года назад

I love the tint on your glasses, it's serial killer-ish, where can i get a pair like those?

@bawad 4 года назад

a package arrives at your door after the 3rd kill

@fev4 4 года назад

@@bawad respect

@-Jakob- 4 года назад

They are the left-behinds after each kill. That's the way you get it.

@johnnamtae9610 4 года назад

@@bawad quick scope no scopes?

@flamendless 3 года назад

Those tints are wiped off blood from killing

@0dyss3us51 4 года назад

You are hilarious and informative my dude haha, relatable. And damn dude the lenght of your link

@tonylion2680 3 года назад

I´ve been watching your videos and yes, the quality of the content is always awesome, new suscriber

@gelismissuriyeli4440 Год назад

This was the best explanation video I've seen on the matter... Kudos to you Mister...

@ticos.thepsourinthone9150 4 года назад

This video was hilariously informational, Ben! Thanks! Haha

@mateusnascimento1989 4 года назад

Dude I was literally searching the name of this OPG yesterday. Thanks, dude!

@laenprogrammation 3 года назад

there is a workaround : just add conditional tag in the small server that builds your page. you can still use client side rendering except for meta tags

@archmad 4 года назад

I had similar issue. good thing you found a better solution.

@bigdogsmallman 3 года назад

I think you could easily do this in net core. In the startup class, in the configure for routing, you could filter each route with the correct meta tags. You could make this an extension and bing bang bosh, neat tidy job done

@mohamedaminebouguerra1514 4 года назад

Woah! My self esteem skyrocketed because I managed to keep up with you until the end :D Aside from that, your content is top notch, keep it coming man.

@arthurbruel5545 4 года назад

If the only thing that needs to change is the meta tags (not the rendered bits), you can also modify the html before returning it to the client, inserting the relevant meta tags. It will probably lead to performance problems, but you could also perform an if condition on the referrer of the request to determine if you should perform such modifications.

@waynevanson277 4 года назад

A solution to your problem could be to build a single page application, with each end point for the app being pre rendered. It's basically jamstack. Once a user loads one page, the others do not need to be loaded.

@alirezvani9149 3 года назад

Now you can make static pages for you dynamic frequently updated pages with Nextjs, How it works's is that it looks at the requested page and if it is present from the build time, sends it back and if it is not built during build time, builds on the go(run time) and adds it to the built pages for the next request. pretty amazing and game changing !

@nilanjanmitra7459 3 года назад

I use EJS and it allows for variables to be passed before sending the HTML to the client, so that can allow you to change the values in the meta tags.

@cedric_lfbr 4 года назад

I had to do that once, I used a Lambda function since it was hosted on AWS, and the function intercepts the CloudFront distribution request and updates the HTML if the request comes from a robot, adding the OpenGraph tags.

@brianevans4 3 года назад

I think I might try react snap. That sounds good. Pre rendering on every build. Because often the layout of a page is the same even of the content changes. What do I mean by that: every reddit post will have the logo, the side bar, the footer and a div in the middle which contains the contents of the post. So you can prerender all that with an empty div, and then Hydrate it. Even with user generated content (as long as it is simple and consistent) you could prerender. Thanks for the video

@tunyaa 4 года назад

netlify has a free experimental feature called pre-rendering, for me, it works with Facebook, it parses the right meta tags automatically with pictures also. My content comes from a backend via graphql and apollo. meta is being set with react helmet, the page is handled by react-router, and it's a create react app project. Hope this helps. You can also do prerendering very very easily with react-snap package, but you need to rebuild when data changes. (PS. Thanks for your work, I really like your videos)

@roshanican504 3 года назад

You make my day better

@SmujMaiku 3 года назад

I had this problem once but my focus was towards crawlers. I ended up using some php to "render" the important bits like title, descriptions and links. Then the javascript would remove those elements and do the single page app business. It was back in carrot farmer code days but I'm sure happy coders can accomplish this just as well.

@krimo10 4 года назад

This sounds brilliant and I would need this for my next mvp

@cauebahia 4 года назад

It works! I do exactly that with my react web SPAs. I use firebase and cloud functions to detect user agents and serve SSR version on the fly to robots and CSR version to users. This is also important to SEO indexing, cause some robots won't run any JS and expect html-only responses. Really enjoy your videos.

@leisiyox 3 года назад

What about some prerender.io ?

@cauebahia 3 года назад

@@leisiyox I thought about using it, but never tried it. Don't know how well it works. It would also cost more than my current firebase cloud function solution.

@leisiyox 3 года назад

@@cauebahia what are the conditions that you recommend using firebase? I thought about using it but I seek guidence

@cauebahia 3 года назад

@@leisiyox I like that they integrate lots of services in a single solution. When you create a firebase project, you instantly have access to file storage, hosting, database, authentication, and some other stuff that makes it really easy. I also like that Firestore has real-time listeners for your data. Really good for a client side rendered app. Also really like their documentation and the fact that you can easily access other Google Cloud services and API. There are many videos online about it. Check it out.

@alexsilny5748 4 года назад

I had the same issue last week and also was thinking about moving to nextjs, but having a separate domain and server makes a lot more sense.

@happysloth91 4 года назад

well Next js or any other SSR solutions doesn't mean you're gonna use one server for the backend and the front-end.

@PaulSebastianM 4 года назад

If you manage the web server, you could use the web server's router to do the same exact hack you described without the need for a different subdomain, just a route that checks the user-agent of the client and returns different HTML based on it.

@BribedStudios 4 года назад

Nice GatsbyJS colorway on that shirt 🤙

@kierangill4967 4 года назад

Sapper + svelte gives you the best of both worlds

@classik305 4 года назад

Subbed for the consistent Angular claps 💀

@dmytrolesyk4045 4 года назад

Keep us updated, I'm curious if it'll work and what will be the most difficult part. Also, I did not quite understand why you decided not to use react-snap

@jimchapman4579 Год назад

Greate video! I use Laravel on the server side to serve up everything. Static html pages and React apps or a combo of both. It's easy to embed a react app within a .blade template file. Meanwhile Laravel takes care of everything else, like API services, user registration and authentication, etc. Best of both worlds.

@gompro 4 года назад

Very useful video as always

@arpowers 4 года назад

I love how Ben roasts Angular devs. I thought of that carrot farmer line off and on all day and cracked up every time.

@PaulSebastianM 4 года назад

For your sake and ours, I hope you DON'T get a girlfriend too soon.

@kirasmith1147 4 года назад

I just used a node.js express server to host compiled create-react-app, this way you can modify the page and add meta tags if needed before serving the page. Sort of a mix of server and client side rendering as he said.

@m1dway 4 года назад

Your solution at the end is valid. Use reverse proxy to detect the request, and forward them appropriately. However, it's best to use SSR from the beginning if that's your intention.

@AndreiNedelus 4 года назад

Hey I saw Wes Bos in one of his videos, he used cloud functions to generate the preview and puppeteer i guess to take a screenshot of the url

@degraphe8824 4 года назад

Wow I don't usually comment on these types of videos But bro This is amazing content please keep it up man

@maxwellmuhanda7940 2 года назад

this was so easy to understand am subscribed

@stuartgreen5217 4 года назад

I guess u never heard of prerender.io been using it for years

@angry_moose94 3 года назад

Lol just killed the whole argument. Never heard of it before. Just goes to say that tech is exponential. Wonder if it will cause the cosmic crash eventually.

@ayushkhanduri2384 3 года назад

yep yep yep , you just commented before me

@rodrigoabselcid 3 года назад

@@ayushkhanduri2384 same case, I just searched prerender before I add a comment about it to check if it's already mentioned and here it was.

@Saurabhandsonu1994 3 года назад

🤯

@toby6389 4 года назад

Every time I have a problem with my apps I just wait for Ben to have them to so he can solve them for me.

@jhonasn 4 года назад

english is not my first language so i understanded only on second time i watched this, thanks for de vid i've not dev a site with link preview yet, very good to know it!

@ferbs8 3 года назад

Nice content!

@BrotWurst Год назад

7:20 would it be possible to use the same url but check the header value on the for example nginx server? like is this user agent a bot (twitter, fb, etc.) => proxy to your slim API for only the meta data response and if its a real user (mac, windows, chrome, firefox user agent etc.) => proxy to your real page / default response / SSR page. maybe im forgetting something. i dont know if this could work.

@maxcantube 4 года назад

Going through a similar issue myself. My static site is hosted on S3 / CloudFront, orchestrated by terraform. My plan is to use CloudFront Origin Response triggers to trigger a lambda function to add the correct open graph tags to the response. I think this is the lightest weight option.

@wanjohi 2 года назад

Did you do it? Am exploring some of this ideas :)

@zarghamkhan7948 4 года назад

hi ben i dont know what you are talking about, i am addicted to listen to you, may be it will start making sense someday, i am still learning react and some other frontend libraries.

@johnnietirado6131 4 года назад

Had this issue while using a MeteorJS website running with ReactJs as the client side is that we created a crawler ( i think there is an npm project for this) that would go to every page, render it and save it on our DB. When a non-human (Google) would access the site it would served this rendered HTML, making it SEO friendly. Basically our server would use the User Agent to define what type of content the user would get served. Hope this help

@rajatrao5632 Год назад

can you please explain what do you mean by 'render it and save it on db' , do you mean like render the dom elements and attach to html and store it in some link and add that link in db , or what exactly are you storing in db, if this is the case wouldn't it be too much for pages which are dynamic like /rob/photos, /sam/photos and likewise to be stored in db or am i missing something

@sajedsoliman4780 3 года назад

You're great bro 💖💖

@jvcmarc 3 года назад

this is actually the first time I understood the difference between client side and server side rendering

@ntcc2821 Год назад

I like your humour😂😂...great lesson as well

@arafatzahan3697 4 года назад

You are my spirit animal dude.

@vutesaqu 4 года назад

Could you use something like pug generate a html file like the normal one that just contains the with meta tag links that have and just send that instead of the normal blank html (instead of having to different by client) ?

@jeserodriguez 4 года назад

I would use the same client-side bundle BUT adding a little bit of logic on the static assets server to add the meta tags to the HTML shell that embeds the client-side bundle. That way, you won't need to implement HTTP redirects, AND probably is better once you start working with deep-links for a mobile app.

@Rssks 3 года назад

2:05 i do it this way: Server serves response for parsers (meta, og, schema, jsonld and plain html content) and then comes along js that structures it up and takes over routing from this point, so when you navigate you actually don't "refresh"

@tarekali7064 4 года назад

Benawad officially a CHAD?!

@alldecentnamestaken 3 года назад

"It's like I spent a bunch of time building a house and now I want that house to fly." LMAO

@drewlee7435 Год назад

Best explanation, Ever.

@Manivelarino 4 года назад

I just put my meta tags with variables like %PAGE_NAME% %PAGE_IMAGE% and replace these later while serving the page with express. doesn't work while client-side routing but It works for link previews.

@DanishAnton 4 года назад

I was wondering what the previews you see on slack or text messages were called. Thanks

@zindev 4 года назад

Nice video Ben. Try this out and make a video about the results please.

@wcandillon 4 года назад

Very useful, thank you for pointing to react-snap. Happy Hacking Ben 🙌🏻

@rahulramsaha7266 4 года назад

I was just watching one of your videos on react native animation earlier xD Keep up the good job 🔥

@pedroserapio8075 4 года назад

Gatsby also solves the React single-page problem, since we can generate all the individual HTML, CSS, and JS pages.

@mortezatourani7772 4 года назад

I liked the idea however, I think it is still good to have SSR for all users or maybe SEO as well. Would you share your ideas on uFrontends, too? Are you preparing some sort of tutorial on that or what?

@iamrohandatta 4 года назад

You can use the header trick as you mentioned, and then simply use something like puppeteer to load the page on the server itself and then send the rendered HTML page to the client. If the header says it's from a normal user, then don't go to puppeteer, just return your usual index.html file.

@iamrohandatta 4 года назад

I got this idea from here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lhZOFUY1weo.html

@ryszard3756 3 года назад

Hello Ben, Have You thought about differences between react-snap and NextJS/Gatsby from SEO perspective? I mean is there reason to use NextJS instead just react-snap to get better results in search engines? Does NextJS/Gatsby do something extra to perform better in SEO? Regards

@amanrubey 3 года назад

I will learn WebD so that I can enjoy these digs by Ben😂

@DubstepRS 4 года назад

The preview still won't work when users copy paste the link directly from the browser url bar

@dcdales 4 года назад

Cool stuff about magic links. Even if you hadn't talked about that, you mentioned 🥔. Automatic upvote.

@CloudiaNgaming 4 года назад

I love your humor.

@fun6789 4 года назад

I think he meant that we should use Next / Nuxt from the beginning. I used to face these problems and since then I use Nuxt for every project and never worry about these problems again

@pyrotaze 4 года назад

Great vid

@ufufu001 4 года назад

the girlfriend problem might be solved if you stop walking around wearing asexual flag shirts

@SayWhat6187 4 года назад

hahaha

@williamboshi1855 4 года назад

lmao, good catch, respect

@travistrue2008 3 года назад

He's just playing hard to get. Karen gets it.

@johnyepthomi892 3 года назад

But with this if he ever gets one, she will be the right one. Lol

@ragnarok7976 3 года назад

He do check a lot of aesthetic boxes from the virgin meme... Though I probably do too 😆

@johnnamtae9610 4 года назад

Hey Ben. Can you make a video of a list of all the terminology a web developer should know. Client side rendering ect..?

@vorname1485 4 года назад

Why do you want another domain for that. The server that delivers the app index.html could also deliver the meta response instead, based on user agent. One problem in both situations you could get (separate service or combined), is that the bots make checks whether the content they see is different to a regular user. Whether any of them does it, I don't know, but I would check this possibility.

@asiraky 4 года назад

I use client side rendering, and am able to return different HTML per page from the server. This is only a problem if you have a single, static, index.html.

@Gil-Porsansky-Archive 3 года назад

i had the same problem , i solved it using react helmet and react snapshot, it's important not to put the og meta tags in your html , only put it in your react helmet dynamic page content , if you got og tags in your html facebook and other platforms will see both og tags and it will take the one on the index.html

@MrSurfsAlot 4 года назад

I love your humor

@isfland 4 года назад

Another problem I struggle frequently with client side rendering is content indexing by search engines. There is a chance that Goggle will index js-generated content, but it depends. Other search engines will not even give a try.

@gunjanrajtiwari1435 3 года назад

how to go back and forward if we are doing client side rendering?

@leno__jeno 4 года назад

Doesn't Netlify have the option to pre render single page applications for bots? (Originally for a better SEO) I'm not sure about this because I have never used this feature before, but shouldn't it also be able to solve this problem?

@TimeoutMegagameplays 4 года назад

Solution: NextJS, Angular Universal, Nuxt, etc.

@jpsimons 4 года назад

Also check out the create-exact-app npm (that's exact not react). Like NextJS but Express-forward design, full control at the server side level of what's going on.

@brandon.duffany 4 года назад

@@jpsimons Just FYI, next.js also gives you full server side control. You can just run next as a library within an express server. In my experience, it's super ergonomic while preserving the state-of-the-art benefits of next (code splitting, automatic static optimization, incremental static generation, etc.). Having said that, I have not yet checked out create-exact-app, and am not sure how it differs from nextjs.

@angshu7589 4 года назад

Why do I not like the sound of Angular Universal?

@milorad3232 3 года назад

@@angshu7589 because you are not carrot farmer. Although color of your profile picture kinda resembles the carrot :D

@TimeoutMegagameplays 3 года назад

@Adithya R Svelte Sapper is still in early development. I love Svelte, but Sapper is still far away from production-ready

@victorbjorklund 4 года назад

Nice solution. Only downside guess would be that Google wants you to show the same content to their bot as the user. But probably doesn't matter if you don't want to index those pages.

@mbaneshi 4 года назад

How about mixing django template system with one spa like vue . What do you think ?

@mathisk5329 4 года назад

Huh thats an interesting problem. You could, of course, only SSR the meta tags. Would be a nice little project to work on an ssr-meta-tag-proxy. Wonder how that would work

@ChrisStayte 4 года назад

Thanks Man!

@jinxblaze 4 года назад

u watched a 9 min video in 3 ?

@ufufu001 4 года назад

@@jinxblaze that is what true supporters do: they appreciate the content even before watching it. it's beautiful.

@ChrisStayte 4 года назад

@@jinxblaze TRIPPLE SPEED

@jinxblaze 4 года назад

@@ChrisStayte xD

@Colonel1954Dz 3 года назад

Well a simpler but similar way would be to always server side generate the index.html but only to change the meta data while letting the index.js generate the actual content. This wouldn't hurt human users and is pretty light on the server (only entry point html meta tags need to be generated depending on the link then the rest of the rendering navigation is done client side)

@gilliangoud 4 года назад

kinda curious what the increased load would be if you'd do this on the normal domain already -> check the user agent... Would eliminate cdn usage tho... so maybe not foolproof.

@josephlardner-burke9400 3 года назад

Why wouldn’t you just serve this over the server on a different port? As in send the result as a when someone searches that route?

@NextLevelCode 3 года назад

In your example of the sub domain. I think that’s not needed / don’t need to redirect. If you are using a server side program it can decide to return the react app or the preview on the normal domain using the same user agent logic or an IP address list of known Facebook servers.

@maasteeve 3 года назад

The problem I see with the magic link is that when a user just copies the url instead of pressing a share button to get the special share.* link that there will not be meta tags and when you do use the special share.* then there are meta tags. And I think most users will probably just copy the url they are on now instead of looking for a share button

@kavy6114 3 года назад

Great solutions

@rishabhrathod888 3 года назад

For some wierd cases like mine where only /particularRoute need to work like SSR what i actually tried was hosted gatsby project in particular route of CRA project and it worked just need to handle few re-routing cases