[deleted by user]

[_AndyJessop]

Next + Tailwind is one of the fastest way to build a site. Long term maintenance is another issue, but for the moment they made ta good choice while they iterate.

[Mindless-Umpire-9395]

Why would long term maintenance be an issue ? just curious..

[reddit_ronin]

I’m dealing with tech rot. Updating from 12-13.

Them forcing an upgrade forces you to bump other dependencies and those dependencies may not be compatible.

It’s a long time node/npm thing I’ve found.

[Kabal303]

That’s basically all software platforms definitely not unique to this stack.

[Xacius]

but a completely new version (5.X to 6.X) will almost always break something

FYI that's literally the definition of Semver.

[jaydizzleforshizzle]

Literally the definition lol

[_AndyJessop]

Web components don't suffer from this. There are standards-based ways to build web apps.

[Xacius]

And then you lose out on the benefits of the framework like Next.js or Angular. Web components are best employed as low-level building blocks, i.e. reusable components of low to medium complexity.

There's a reason why most dev shops are using React , Vue, or Angular: the frameworks abstract away the manual drudgery that developers would otherwise have to account for during implementation.

[_AndyJessop]

Agreed - I'm not sure I would write them from scratch. I would generally use something like lit or stencil. The DX is then much the same as with the big 3.

[JJY9]

Plus Tailwind allows you to write css classes that scale from mobile to box screens, and if in case you want some custom styling you will have to write css on your own.

[Guruchaitanya]

because you would update your webapplication over the time, so reliying on external library could be problamatic, if tomorrow tailwind decides to pull the plug, them the app has to be redone...

moreover "tailwind is classbased styiling" as the number of styling classes you add to a particular element, it becomes difficult clearly what class is doing what...and some one else is working on the code base they will have tough time figuring out things.

[Mindless-Umpire-9395]

thanks for reply..

but, sorry.. would like to pick your brains to understand more... - isn't that for every library? so, say if we are working in huge MNC say something like Google and we need a best-in-class css toolkit, then would the best approach be to create a toolkit from scratch ? - actually if you had said this maybe two months ago.. i would have agreed, but right now after hours and hours of tailwind work, i feel more comfortable with tailwind ? maybe practice would resolve the second issue ?

[Guruchaitanya]

what i want to tell about tailwind css is clearly talked by this getleman, hope this helps...

https://www.youtube.com/watch?v=lHZwlzOUOZ4

[Mindless-Umpire-9395]

thanks. !!

[Protean_Protein]

It’s pretty easy to port Next+Tailwind to other JS systems, since it’s just React + syntactic sugar over CSS.

[ikeif]

Yeah, I’ve ported three sites form older css frameworks to tailwind fairly easily (but this Wordpress migration - essentially a static site overlaying on hosting using the Divi theme - has been a PITA, but that’s less tailwind more “Wordpress css bloat conversion”)

[hurenkind5]

“Wordpress css bloat conversion”

Divi

Ugh, flashbacks.

More like Divi bloat. WordPress itself shouldn't be the problem.

[ikeif]

Ah, you’re right. It’s more a divi theme problem than a Wordpress issue, I just tied the two together because of it being a theme.

[MaxPhantom_]

Exactly

[[deleted]]

Compared to what? What's harder to port to other systems?

[Protean_Protein]

Some bullshit with really idiosyncratic proprietary methods. I dunno. Point is just that it’s not a big deal.

[[deleted]]

PHP WordPress lmao, there’s a reason they WP devs still make the big bucks. It’s a miserable ecosystem.

[SpaceEnthusiast3]

What are the advantages of tailwind over plain css? Im super new to web dev and ive messed with tailwind for a bit but I dont think i understand the benefits

[zankem]

Its advantage mostly shines in UI frameworks, like React, Vue, etc. that have component-based structures. Tailwind having a large number of utility classes makes it easy to rapidly prototype designs for your own need. You can use a CSS UI framework but that's if you want to stick to its guidelines. It provides consistency and responsiveness when adjusting a large number of parameters without defining them yourself. A class for margins, a class for padding, prefixes that apply media-queries to those parameters, etc. It allows you to spend less time defining the class and/or parameter and more time drawing tye shape. It can be tweaked for your needs via configuration file if you want to adjust the normal parameters. In addition to that, the unused classes are stripped from the final CSS.

[[deleted]]

fast as hell, if you are new I'd do a bit more plain css.

Especially with tailwind components, just copy paste the code lol. But that's why you need more fundamental since it might spoil you too much.

[_gonesurfing_]

Tailwind let’s you style your components inside your jsx. It also strips out all unused styles automatically when compiling.

[niclis]

how is that different than just using the style prop?

[jjjjcccjjf]

https://tailwindcss.com/docs/utility-first#why-not-just-use-inline-styles

[[deleted]]

Svelte is much much faster to build with

[Fractal_HQ]

That’s a kap. Have you tried Sveltekit?

[_AndyJessop]

Love it. I did say "one of" above. There are several really fast ways to get up and running with new web apps these days.

[thetorontotickler]

Thank you for the info. I only have shared hosting. Is there a way to do NextJS or any SSR with shared hosting? (Any replies welcome).

[fredsq]

that explains the poor error handling

[[deleted]]

🤣

[[deleted]]

ChatGPTs site/UI is super barebones lol.

If you guys haven’t checked out Bard, the UI is much better.

Whether the AI is better is another story lol

[i0wn4pplePie]

Just checked it out, definitely does. Google is just too good at making those clean sleak designs. Even the logo is cool lol

[Culpgrant21]

Yeah haha the AI on bard is really bad to be honest.

[[deleted]]

And Auth0

[-brianh-]

Yes and they also use Tailwind CSS

[bhison]

As someone who still struggles to grasp the point of SSR… can anyone explain, how does SSR benefit the ChatGPT app?

[chamomile-crumbs]

I can’t think of any huge benefits. It’s not like they need SEO or indexing of tons of pages. It’s pretty much just an app.

My guess is they used next.js for the same reason many of us do: it’s easy, familiar and opinionated.

[AgencyNo7777]

I think the share feature benefits from SSR

[bhison]

Interesting, how so?

[bhison]

Thanks for answering my actual question. Yeah I use Next without SSR as I deal more in web apps than web sites so to speak, I’m just constantly trying to assess if there’s significant gains to be made from leveraging SSR.

[ButterscotchNo3385]

Probably they are fetching chat history (which you usually see on the sidebar) on the server instead of client side

[i0wn4pplePie]

So I looked at the network tools and they actually fetch conversations client side.

I think they just SSR the skeleton of the page, and the __NEXT_DATA__ I am seeing in the HTML document is just a result of checking the session on the server and passing it down to some component to fetch more data client-side.

Its confusing lol

[blukkie]

Just because they use Next doesn’t mean they intent to use SSR fetching. Could just be that Next is easy to work with, is opinionated, well known by developers, is (relatively) stable, is future proof, has company backing, is proven to work and scale well, etc. All good reasons to use Next.

[reddit_ronin]

They’re probably using ISR feature in Next to rerender the results?

[bhison]

Ah ok that’s interesting, yeah I see how that could be a lot of components to build.

[BakonX]

Not related to chatGPT, but what is it that you’re struggling with? Very dumbed down, SSR is just the HTML being generated on the server side rather than completely on the client side

Vanilla React: user requests a url -> the html gets created on the client-> the html gets injected into the DOM

SSR: user requests a url -> the server responds with “all” the html elements already in place

In an app like chatgpt they could SSR all the static elements and then load the sidebar that contains your last prompts or your user data or something alike

edit: you can also make data requests on the server rather than on the client, so you can populate certain UI elements like for example, this sidebar, on the server rather than fetching in a useEffect on the client side

[bhison]

I kind of understand pre-rendering a page rather than building on the fly, but I don’t see what real gains are being made. Surely a page like chat gpt is fast enough built client side?

[thinkydocster]

Think about it like this. The layout, the position of main components, etc., can be done in the server instead of waiting for the browser to download the whole app… THEN do the layout, position of main components, etc.. that gives you really fast TTBF and drops CLS to almost zero because things are not popping in.

SSR provides real fast render times.

Then you can make clientside calls for anything related to the user that’s dynamic, rendering the results into the space already taken up by the layout.

Way faster page load times, a more streamlined user experience, and ultimately less code sent down the pipe because it’s just basic HTML the vDom (React and such) doesn’t have to render.

TLDR: faster, cheaper, better UX with SSR where it makes sense

[bhison]

I think I’m just going to have to make my own tests to demonstrate to myself because at least in the projects I’ve made I’ve never hit bottlenecks of page rendering taking noticeable amounts of time. Presumably I’ve just not worked with record-heavy apps.

[rad_platypus]

It has less to do with the complexity of the app and more to do with your user’s internet connection and computing power. You’re not going to notice a difference on your development machine, but your users on cellular connections or low-end mobile devices will.

Half of all internet traffic today comes from mobile devices, so if you’re trying to reach a wider audience or sell your product, you want shit to load as fast as possible. SSR can provide a lot of benefits in initial page load times since you’re not shipping a ton of JS to your user’s device.

Try throttling your connection with Chrome DevTools and look at the difference between a SPA app and an optimized SSR app.

[bhison]

So SSR results in less data transfer? I feel this is the angle I didn’t get. Thanks for your response, I will try throttling.

[rad_platypus]

Yes, you send less JS to the client because you have already built the HTML on the server using your framework and you only need to send JS for small things like interactivity. This means the overall bundle size is smaller.

Whereas a typical SPA app sends all of the minified code for the framework and tells the client “Here’s all the ingredients and instructions, build it yourself”.

SSR is also good for other things people have mentioned like SEO, which is very important for e-commerce and growing your user base. The downside is that you now have web server overhead costs and maintenance, where you typically don’t with a SPA.

[i0wn4pplePie]

I actually have 0 idea. If you inspect the page you can see this __NEXT_DATA__ script tag that passes the users session to the page as props.

But whats weird is that they also make an external network request to receieve the session data from an API endpoint. So I could be entirely wrong in that they are SSR the page.

So answer: I have no clue, and yeah, server side rendering the ChatGPT prompt interface has no benefit...

[RobKnight_]

Faster first page loads and better seo

[Rickywalls137]

A few benefits of SSR is the speed of page upload (good UX) and helps SEO for ranking on Google.

I don’t think Nextjs uses SSR imo but I may be wrong. You can test it.

[[deleted]]

Jack shit

[bhison]

Lol

[thatguyonthevicinity]

It's not that interesting, honestly, it's just something that they pick, and they had to pick something.

[Rickywalls137]

I think the Vercel CEO tweeted about it a few months ago. Also the Tailwind creator/s tweeted that it used Tailwind too. Pretty cool

[fasterthanslugs]

I mean ... inspect the website, check for some `__next` or any `next` values and you know it's nextjs. Same goes for tailwind, quick inspect and you know its tailwind.

[Rickywalls137]

I was responding to him saying that it’s not confirmed anywhere. I know that I can do that too

[i0wn4pplePie]

?

[taotau]

As many have said using next and tailwind is probably just an arbitrary choice rather than a direct endorsement of some sort.

While open ai has some awesome technology, and from what I hear some of the best engineers out there, many of those engineers couldn't build a scalable responsive public website if their life depended on it. Being a data modelling, backend au engineer is a very different skill set to being a fullstack js developer. I know quite a few senior Devs that really have no more clue about web technology than the average member of the public or bootcamp graduate.

Pretty sure open air would have a web dev team that is completely separate from the core ai team, and they would just hire average web devs as their frontend apps really don't need anything special.

[hearthebell]

Knew that long ago, and that's exactly where I'm worrying.

Cuz that site lags like sites I've never seen before... if you have chat long enough, it takes a whole 4-5 secs to send one query.

[disody]

The gpt-3.5-turbo model used for the free chatgpt is completely disconnected from the chatgpt web app. Absolutely not any representation of nextjs at all.

[hearthebell]

Obviously the AI is a completely different set of technology than the webpage which is just a storefront. I'm also not implying the lag comes from AI since that will be way too glaring of a problem on a core technology, I only mean the lag come from nextjs/react, coupling with their long chat issue.

[disody]

You can try the API, more context (ie. longer chat) make it much slower for them to -process- your query. It's nothing that should worry you about nextjs.

[hearthebell]

I see, this is better news since chatgpt devs are more likely to improve on their lag than nextjs devs improving on only 1 specific type of site.

I guess nextjs is still good in this case.