DEV Community

Cover image for What's your fav SSR framework: Next, Nuxt, Nest or Sapper?

What's your fav SSR framework: Next, Nuxt, Nest or Sapper?

Madza on November 20, 2020

Next, Nuxt and Nest are server-side rendering frameworks, based on React, Vue and Angular. There is also Sapper, a new tool based on Svelte. So fa...
Collapse
 
yoursunny profile image
Junxiao Shi • Edited

My server side rendering pipeline: I use nginx to invoke PHP to invoke Node.js to invoke Puppeteer to invoke Chromium.
Client side receives a screenshot of the webpage. They can never steal my super secret HTML and JavaScript code again.

If the whole webpage is a screenshot picture, how to have hyperlinks you ask?
<A HREF=browse.php><IMG SRC=page.bmp ISMAP></A>

ISMAP attribute creates a server-side image map. You click anywhere and server receives coordinates:
GET /browse.php?10,27 HTTP/1.1

Want a mobile site? Sure.
I can use Selenium to control an Android emulator. The screencast is streamed as MJPEG straight to your device!
Bandwidth consumption isn't a problem. This is what 5G is for.


EXPANDED VERSION: dev.to/yoursunny/the-worst-server-...

Collapse
 
sergix profile image
Peyton McGinnis

This is probably the most over-engineered backend stack I've ever heard of... Why are you afraid of serving up regular HTML/JavaScript? Isn't this an extremely expensive operation that results in significant client delay and server cost?

I would also be greatly concerned with accessibility and interactivity since essentially all user actions are static.

What was your purpose in developing this architecture?

Collapse
 
yoursunny profile image
Junxiao Shi

Accessibility? We are fully ADA compliant.
There's a 800 phone number on the page in text format. Blind personnel can call this number to speak to a live operator, who would read the page to them. This is a friendlier service than Text-To-Speech systems.

Thread Thread
 
sergix profile image
Peyton McGinnis

Aside from text-to-speech issues, serving up an image as your webpage creates issues with those who have to use special navigation devices. Also, consider a person with a speech impediment trying to explain to the live operator which page he is on. I'm not trying to sound demeaning, but you really have to consider every use case here.

In addition, you excuse the high use of bandwidth by stating that "this is what 5G is for," but almost the entire world still uses 4G/3G and will for the foreseeable future. Assuming the majority of your users are entirely up-to-date with mobile technology is a major pitfall.

Using ISMAPs for an entire page are extremely archaic and rarely implemented well, but from what it sounds like you have some form of a working website using it. Which brings me to my original question: why don't you just serve the HTML and JavaScript, eliminating nearly all of these issues I've stated and drastically reducing costs for your company and your users?

Thread Thread
 
yoursunny profile image
Junxiao Shi

We could support TAB key navigation by defining <AREA> tags over the picture.

We send 5G MODEMs to every user.

As I said, the HTML and JavaScript are super secret.

Thread Thread
 
sergix profile image
Peyton McGinnis

Ah, so I'm assuming you're a telecommunications company. The 5G makes a little more sense now.

But why are you trying to keep the HTML and JavaScript "super secret"? I don't understand the problem with serving a regular webpage as long as you're not storing passwords and other secure information in the actual HTML/JavaScript code (which you shouldn't be doing anyway.)

Thread Thread
 
yoursunny profile image
Junxiao Shi

I'm too ashamed to let others find out that the page is made with Microsoft FrontPage Express and Flash and ASP and jQuery, so it has to be kept secret.

Thread Thread
 
sergix profile image
Peyton McGinnis

Ahhhh 😂 Definitely for the best then!

Thread Thread
 
madza profile image
Madza

Hahah, made my day 🤣🤣👍

Collapse
 
ilyabuligin profile image
Ilya Buligin

Can you show me this site? It's sound amazing :D

Collapse
 
yoursunny profile image
Junxiao Shi

It's in internal network for now. 50 Likes on the comment above and I'll put up a public version.

Collapse
 
offlinehacker profile image
J

there's a special place in hell for whoever came up without this idea and is also a reason why we can't have nice things, just plain terrible.

Collapse
 
yoursunny profile image
Junxiao Shi

Hell has cookies, but only if you visit the hell with HTTP/1.0.
My hell client uses HTTP/0.9, so I can't receive cookies.

Collapse
 
simonholdorf profile image
Simon Holdorf

Nuxt is my fav but that's because I work with Vue.

Collapse
 
spiritupbro profile image
spiritupbro

next fosho and chakra ui for the css framework i create one here even thought its still look worst you can take a look my website using nextjs and chakra ui in rino.world

Collapse
 
madza profile image
Madza

never used chakra UI, might look into it in the future 😉

Collapse
 
spiritupbro profile image
spiritupbro

i love the way chakra ui works with with emotion css framework so instead of creating style like this

<Box style={{marginBottom:"2px"}}/>
Enter fullscreen mode Exit fullscreen mode

you can just style it like this

<Box marginBottom="2px"/>
Enter fullscreen mode Exit fullscreen mode

and it will result the same thats why i love it

Collapse
 
tobiastimm profile image
Tobias Timm • Edited

I think nestjs is wrong here. It is a framework inspired by angular for server-side applications like APIs etc, but not a SSR framework like Next, Nuxt or Sapper.

Collapse
 
simonholdorf profile image
Simon Holdorf

Yup, Nestjs is more like Nodejs + Typescript inspired by Angular

Collapse
 
merri profile image
Vesa Piittinen • Edited

Server Side Includes, or SHTML if that rings a bell better.

Collapse
 
gktim profile image
gkTim • Edited

I use nuxt because I prefer vue over react. But have also done next.js projects. Both are good to go

Collapse
 
hassnainabass profile image
Hassnain Abass

NextJS is my fav

Collapse
 
stef4nutz profile image
stephen

I love next.js, it's simple and easy for me.

Collapse
 
shadowtime2000 profile image
shadowtime2000

I don't really use anything other than React so Next is my favorite.