9 ms·
Next.js – A small framework for server-rendered universal JavaScript apps
- johns 10y agoHere's a sample app: https://github.com/zeit/nextgram https://github.com/zeit/nextgram
- deleted 10y ago[deleted]
- ggregoire 10y agoI like how they use the tags <details> and <summary> in their FAQ! https://github.com/zeit/next.js#faq https://github.com/zeit/next.js#faq
- cdubzzz 10y agoWhat do you like about it? It wasn't immediately obvious to me that those were even clickable and the <details> text does not differ from the <summary> text so it all kind of rolls together in a weird way as your click around.
- cpmsmith 10y agoI think they mean the unexpected usage of semantic markup in the wild. It's an ongoing battle to get it used more broadly, so it's nice to see it popping up unannounced and working so nicely. Your (valid) gripes are mostly out of the repo's control, as all styling appears to be GitHub.
- cdubzzz 10y agoAh, that's fair. But GitHub does provide quite a few styling options[0]. [0] http://primercss.io/ http://primercss.io/
- deleted 10y ago[deleted]
- tyingq 10y agoThe split screen demo on the linked page does an outstanding job of showing how this works. Nice work.
- ivan_ah 10y agoYeah, it's like the best 30 seconds demo I have ever seen.
- glaberficken 10y agoI like how its all live typed (or seems to) with the occasional back-space and everything =)
- jonny_eh 10y agoThis looks so incredibly well thought out and designed. I can't wait to start using it!
- BilalBudhani 10y agoThis is amazing! totally reminds me of PHP days.
- desdiv 10y agoI'm very impressed that middle-click/ctrl-click works flawlessly. That's increasingly becoming a rare thing on the web these days. Forward and backward navigation only works up to one level. Is that a limitation of the framework or an intentional design choice?
- Aldo_MX 10y agoI tried the demo here, and middle click or ctrl+click is not working, quite the contrary, it is treated like a regular click :/ https://nextgram.now.sh/ https://nextgram.now.sh/
- simonlc 10y agoin the event handler you have to manually check if ctrl is being held or if the lmb was pressed or not. Most people forget this which is a shame.
- Mizza 10y agoI love how ambitious Zeit is being, but I've found that their apps are not quite as polished as their shiny-packaging makes out. I certainly wish them lots of luck though!
- Rauchg 10y agoAnything specifically comes to mind? We are constantly iterating and improving.
- matchu 10y agoInteresting! I really like the architecture here. I think the next major opportunity for abstraction is all the server/client detection you still have to do. Do I want `request.headers['Cookie']` (server), or `document.cookie` (client)? Do I want to create a fresh Redux store (server), or hook into a global one (client)? It's definitely not hard for community members to build these abstractions themselves (`cookies = (req) => req ? req.headers['Cookie'] : document.cookie`), but some of these are going to play into major use cases like authentication, so, as Next matures, it'll start to make sense to provide these especially common abstractions out of the box. That said, these are next steps; the first release is all about showcasing the fundamental architecture, and it's looking gooood :D
- sillysaurus3 10y agoIf someone wants to solve this problem and wants inspiration, look into how Unreal Engine's scripting/networking architecture works. Gamedev and webdev can be very similar at times.
- greyskull 10y agoInteresting! Might you be able to elaborate?
- firasd 10y agoMaybe I'm misunderstanding but I don't think universal apps will share so much code with the client. It's just the view layer that is shared (React components in this case). You wouldn't make changes on the server side by piping them through Redux, you'd just use your regular code paths to read the JSON data from the client and send an update query to the database.
- girvo 10y agoThat is something that react-server[0] is doing reasonably well, though some of the abstractions I would like OOTB are missing currently [0] http://react-server.io/ http://react-server.io/
- 10y ago
- robertmwm 10y agoVery nice, definitely excited to try this out!
- the_duke 10y agoVery intriguing concepts. Especially for quickly prototyping an idea. Getting a React project in place (webpack config, code structure, all the boilerplate, redux,...) swallows quite some time. And I haven't found a bootstrapper yet that I liked.
- jp_d 10y agoHave you checked out https://github.com/facebookincubator/create-react-app https://github.com/facebookincubator/create-react-app Currently using it on a project and it works seamlessly.
- williamle8300 10y agoI'm using it too and works nicely. It's the only ReactJS boilerplate that's officially sanctioned by Facebook right now.
- i__believe 10y agoHave you looked into electrode.io? It's the total package with testing, server side rendering, optional above-the-fold rendering, profiling, etc. It took about half a day to get used to it, but I enjoyed not having to make the decisions over and over again and handles the basics as well as advanced use cases.
- alexgrigoryan 10y agoThanks for the support! I'm glad you like it! :D
- i__believe 10y agoIt's been really great, and reporting issues and small pull requests has been super easy so far. Not really what I expected from a company like walmart so I was pleasantly surprised. The only fundamental disagreement I have with it is how the "client" folder is organized by default. I think it's a mistake to organize by the type of file (component, reducers, etc). Instead, the organization should be centered around the real use (pages, resources, etc.) Explained in more detail here, https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1#.b5kwopbho https://medium.com/@alexmngn/how-to-better-organize-your-rea... I understand that's personal preference, and my preference is born out of seeing more than one react app become a tangled mess because isolation was hard to understand based upon file structure.
- lucideer 10y agoThis looks very nice indeed. I've also just discovered glamor[1] via the Readme, which looks similarly nice. https://github.com/threepointone/glamor https://github.com/threepointone/glamor
- johnhenry 10y agoSimilar: https://medium.com/@pierceydylan/isomorphic-javascript-it-just-has-to-work-b9da5b0c8035#.6ugq1n2eo https://medium.com/@pierceydylan/isomorphic-javascript-it-ju...
- john111 10y agoOff-topic, but what process are people using to make these animated demos? The command-line and browser demo on this page is so clean and crisp. Is it just a screen cap with a ton of post-processing, or is there more to it?
- pimterry 10y agoNo idea how they've done this one, but https://asciinema.org/ https://asciinema.org/ does this for command line demos at least really nicely and easily.
- SureshG 10y agoI am using licecap to create the animated gifs - http://www.cockos.com/licecap/ http://www.cockos.com/licecap/
- bmpafa 10y agoSceen2gif is the best tool I've used for gifts screencasts, hands down. Wish there was a Linux version. http://screentogif.codeplex.com http://screentogif.codeplex.com
- wanda 10y agoYou could use a white desktop background and GifCam[1] / WebMCam[2]. [1] http://blog.bahraniapps.com/gifcam/ http://blog.bahraniapps.com/gifcam/ [2] https://github.com/thetarkus/WebMCam https://github.com/thetarkus/WebMCam
- wanda 10y agoYou could use WebMCam. https://github.com/thetarkus/WebMCam https://github.com/thetarkus/WebMCam
- ythl 10y agobyzanz https://github.com/GNOME/byzanz https://github.com/GNOME/byzanz
- justinmayer 10y agoThe best I've used so far is Kap: https://getkap.co/ https://getkap.co/ (Open source; currently only available for macOS)
- ranyefet 10y agoThis looks absolutely great! Looking forward to try it out soon
- cerved 10y ago[Placeholder for complaint about JS fatigue]
- desireco42 10y agoI am really not into new frameworks, quite the opposite, but this is cool and I can see immediate value of this approach thanks to gif movie on the homepage. Thank you for making this.
- matt2000 10y agoI'm a little confused about the benefits of server side rendering. I thought the point of these js UI frameworks was to make the client do a bunch of the work? Can anyone give me some of the upsides? Thanks!
- findjashua 10y agoserver side rendering only on the first load / if the client has disabled js. If the client has js enabled, after the first load, the app works as a js spa
- gegtik 10y agoclassic SPA: (client request) -> (retrieve empty divs + js) -> (js kicks off) -> (API results used to fill initial page content) -> (further page interaction calls APIs to mutate client side page) SSR: (client request) -> (server retrieves empty divs + js, API results used to fill initial page content) -> (fully rendered first page view + js delivered to client) -> (further page interaction calls APIs to mutate client side page)
- z3t4 10y agothis sounds great, but isnt the point of a js web app that the data resides or are cached on the client !? Making it possible to use offline. And have real time push via websocket when online !? Server side rendering frameworks are as old as it gets.
- recursive 10y agoThe point of a js web app is that you can run it in a web browser. Hammers and nails are even older than server side rendering, yet somehow they still function perfectly.
- z3t4 10y agoThere are advantages to not coupling the client and the server. Like for example e-mail and IRC-chat. You can have a browser client, but also a native mobile app client, bot running against the same server API. Decoupled software almost always means more productivity. Hammers and nails equivalent is cgi/perl/php/asp and they still do a fine job. You can use the screw machine to manually punch down screws, but then why not use the hammer and nails instead, as you do not see the advantage of the screw machine.
- sametmax 10y agoUsing the filesystem as the API has been done before, and there is a reason we stopped doing it.
- pg_is_a_butt 10y agowho is "we"? you're all idiots.
- rdrey 10y agoYour comment would be more useful if you gave us that reason. "Filesystem as the API" in this case looks more like "convention over configuration" (which has worked fine for other frameworks like Rails), it doesn't actually seem to be using the filesystem as the only storage backend.
- nilliams 10y agoDon't really agree - what they're doing is very different compared to what, for example Ember does (which they call 'convention over configuration'). Next's routing is much more similar to Jekyll's which quite literally is based on your filesystem file-organisation.
- rdrey 10y agoAh, I see what you're saying. I didn't consider deeper/complex routes with parameters. This scheme seems to force route parameters into query parameters. Disadvantage: It's not RESTful. Advantage: Your route parameters are now named query parameters. You only handle one dict of parameters... I'm not sure how I feel about this.
- sametmax 10y agoIt's really not: - You can't have beautiful URLs - you can't regroup small related routes in one file - you can't remap you urls without changing your project structure - changing your project structure means changing your urls - now you have part of your url definition in the file structure and part of it in your code logic - of course it's harder to do anything using virtual routes: load balancing, aliasas and redirections, generating urls on the fly, etc
- antarrah 10y agoIt loads pretty fast but the source code is not search engine friendly.
- cschep 10y agohuh?
- antarrah 10y agoview-source:https://zeit.co/blog/next https://zeit.co/blog/next Google bots do not view this rubbish favourably.
- tomconroy 10y agoCan you back up this claim? Have you seen google.com's own page source?
- striking 10y agoWhich part of it would be considered unfavorable? Perhaps it's harder for a human to read and understand, but all of the content necessary for Google to understand it is present in that HTML source. You may have missed it if you hadn't scrolled to the right.
- dylanpyle 10y agoTry this: view-source:https://www.google.com https://www.google.com Minifying HTML, JS, CSS is a common practice
- dinedal 10y agohttps://search.google.com/structured-data/testing-tool/u/0/#url=https%3A%2F%2Fzeit.co%2Fblog%2Fnext https://search.google.com/structured-data/testing-tool/u/0/#... The Structured Data Testing Tool doesn't complain. We'd need someone to try it out and get the results of the other Google Search Console tools to know for sure, however.
- Raphael 10y agoIs there a reason the files are ".js" rather than ".jsx"? As it stands, my text editor defaults to the JS syntax highlighting. I suppose one could make JSX their default JS syntax, but then JSX would incorrectly appear to be correct in non-React files.
- ggregoire 10y agoIf your editor is Visual Studio Code: Preferences > Workspace Settings (to target your React project) > { "files.associations": { "*.js": "javascriptreact" } }
- nilliams 10y agoI don't think many have embraced the .jsx extension. And arguably it doesn't make a lot of sense, because when working with most modern frameworks/libs, JSX is not the only non-standard-js element in the file. Should we call it .es6, .es2015, .es2015+jsx ? So yeah, sticking with .js is common.
- TazeTSchnitzel 10y agoES2015 is standard JS. Maybe not widely deployed, but it's standard. JSX is not.
- deleted 10y ago[deleted]
- clay_to_n 10y agoSome developers (including FB) are using .js for React JSX files now, instead of the .jsx extension. I think the best argument for this is that, while JSX features aren't in the ES2016/7 spec, they may be eventually. And when you're transpiling your code to JS in the end anyway (potentially using JSX, Flow, and other tools that aren't actually valid ES2016/7 code), it's simpler to call it .js than think about renaming files when you add more steps to your babel process (file.flow.jsx.xyz...). It hasn't taken off completely, and personally I like having the ".jsx" extension indicate that file will export a React component instead of plain javascript. There are lots of arguments online about this: https://github.com/facebook/react/issues/3582#issuecomment-89411479 https://github.com/facebook/react/issues/3582#issuecomment-8... https://www.reddit.com/r/reactjs/comments/4kkrwg/ask_js_or_jsx_extension/ https://www.reddit.com/r/reactjs/comments/4kkrwg/ask_js_or_j...
- alistproducer2 10y agoAm I wrong in saying the appeal of this tool is it allows you to process your React app (with little or no changes to accommodate it) on the server? I've been reading a lot about SSR lately. Correct me if I'm wrong, but wasn't one of the points of thick clients to offload processing to the client?
- lucideer 10y agoI don't believe so, though I guess some do. The purpose of (well-written) "thick clients" is to provide real-time interactivity and reduce bandwidth. Beyond this, if something can be done on the server without degrading the app experience, it probably should be. Added bonus if the site works fine without client-side JS at all (which Next.js does)
- partycoder 10y agoHaving to put your program in a string makes it hard to edit. Syntax highlighting, static analysis and tooling in general that helps you filter problems might not work there. To me, tooling is very important since software is more consistent/reliable/productive at simple repetitive tasks like matching parenthesis, braces, quotes... and in my case I take it further like documenting types via documentation tags and verifying that function signatures and return types match. That alone helps me save a lot of time once the code has grown over 1 kSLOC. I think it should be replaced to just a filename that gets required.
- jgalloway___ 10y agoI left https://zeit.co/blog/next https://zeit.co/blog/next open in Chrome over lunch and when I came back the tab was out of memory .. so you guys will probably want to look into that. But otherwise A++
- davidspiess 10y agoSame happened to me (Chrome 54)
- dkh 10y agoSame here. 3 times in a row now, it has crashed Chrome if I left it open long enough for it to do so. Looks like a fun framework, but crashing browsers is kind of a problem.
- dredds 10y agoSame (chromium50) totally crashed (black screen, ctrl-alt-del fails, offline copy same) specifically, happens when i scroll up towards the ani-gifs.
- Rauchg 10y agoI wonder if it's related to the animated gif? I've had it open for many hours as well, and it looks like this: http://i.imgur.com/E05vChB.png http://i.imgur.com/E05vChB.png
- dredds 10y agoProcess of elimination and a dozen restarts. It's not the gif OR the svg (individually) but somehow both together are causing it. I'm on Win7 with 2 gig ram and scrolling this (see pastebin) up from the bottom causes cpu to jump and memory near 1 gig with hdd looping endlessly, so i have to hard power off just to recover any function. http://pastebin.com/AMdhpWcn http://pastebin.com/AMdhpWcn ~
- Kiro 10y agoglamor looks interesting. Has anyone used it?
- idbehold 10y agoOne thing that is never explained in these universal/isomorphic react frameworks/boilerplates is how to make a fetch() against your own server (e.g. a relative route). There's this https://zeit.co/blog/next#data-fetching-is-up-to-the-developer https://zeit.co/blog/next#data-fetching-is-up-to-the-develop... But what if my component looks like this: import React from 'react' export class exports React.Component { static async getInitialProps () { const res = await fetch('/api/user/123') const data = await res.json() return { username: data.profile.username } } }
- firasd 10y agoI'd guess you need to use an absolute route (using a variable passed to the component props?). But yeah in practice you'd probably not want to slow down the rendering by doing an extra HTTP request so you'd probably send the data to the component in a more synchronous way.
- idbehold 10y ago> But yeah in practice you'd probably not want to slow down the rendering by doing an extra HTTP request so you'd probably send the data to the component in a more synchronous way. How would you do that without breaking the whole universal/isomorphic aspect of this?
- faceyspacey 10y agoYou populate redux with all the data your app needs (if you're using setState to store state fetched from APIs on components, stop). Then you simply render your app in one go.
- idbehold 10y agoOkay, let's say I put the actual fetch() inside a redux "action creator" how am I fetching that data server-side? How does some arbitrary route know that a nested component needs to fetch() and then populate your store before rendering? And remember, the fetch() in the "action creator" is still trying to hit a relative route.
- avodonosov 10y agoAirbnb blog post from 2013 how they share code between client and server: http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/ http://nerds.airbnb.com/isomorphic-javascript-future-web-app...
- gt2 10y agoWhile that article may be relevant, I think the OP is noteworthy is because it is a framework, rather than a novel idea.
- avodonosov 10y agoSure. I just wanted to share this real-world example of the "isomorphic js" benefits.
- alasano 10y agoOh you're still rendering JavaScript client side, how mid-2016.
- merrickread 10y agoIt's almost November 2016 man, you can't do that anymore. Just Redux your Flux and make sure you transpile and compile your TypeScript before you deploy that micro service with a Makefile
- kelvin0 10y agoSo if I understand correctly, this would 'transform' Node into a web framework à la Django? Please correct me if I misunderstood. If that's the case, how Node-Server-Render will compare to Django,Flask and other Python web frameworks? Performance better on Node? Feedback from the trenches would be appreciated.
- deleted 10y ago[deleted]
- Walkman 10y agohttp://dayssincelastjavascriptframework.com/ http://dayssincelastjavascriptframework.com/
- deleted 10y ago[deleted]
- j_s 10y agoSurprised to see after 10 hours no one has mentioned intercooler.js which is a stepping-stone in the direction developers focused on the "server" part of "server-rendered" might head without going as far as Next.js. http://intercoolerjs.org/ http://intercoolerjs.org/ https://news.ycombinator.com/item?id=12657565 https://news.ycombinator.com/item?id=12657565
- NickLamp 10y agoCan someone explain to me why this page uses 2 GB of memory on my machine?
- ruffrey 10y agoVery cool. I can't wait to try it after five years in Node land. The people behind zeit.co are great minds in the community. It is funny how concepts come and go in circles. ASP.NET offered unified client and server development, though mostly in C#. It had the nuget package manager and VS store or something, but it was never amazing and packed like npm. Partial page postbacks and page state in encrypted strings..yikes. Now we have that in redux I suppose. It is all so familiar, yet so much better now.
- ivan_ah 10y agoI like this uses the filesystem for the website structure. It reminds me a bit of dokuwiki. Very usable + easy to understand compared to configuring routes.
- ej_campbell 10y agoI don't understand why you need any client side framework. Couldn't this all be accomplish server side with the HTML pre-fetched on the client if needed for performance? There isn't anything dynamic about the website so it could run with zero javascript and then things like the back button after scrolling through the blog would work. Why try to outsmart the browser?
- izym 10y agoSure it could. But this is also about providing a better user experience. Being able to automatically split the bundle into parts, the most needed of which is loaded at first and the rest then loaded afterwards in the background using a service worker, means that navigation will be far more snappy and provide better feedback to the user. Rather than waiting for the HTML to be downloaded when a link is clicked, most of the UI can be displayed while a smaller payload is downloaded. Obviously if your content is 100% static and your target group is people who only have 2G available, this might not be the best choice. > then things like the back button after scrolling through the blog would work. What do you mean? > Why try to outsmart the browser? Not sure how this is outsmarting the browser.
- ej_campbell 10y agoIf you prefetch the HTML of the page, the browser will have it in its local cache, so clicking the link will be instantaneous (304 Not Modified). Regarding the back button, you can see the mis-behavior here: 1) Go here: https://zeit.co/blog https://zeit.co/blog 2) Scroll all the way down to the bottom 3) Click a link 4) Click back Expected: Page returns to exactly were you left off Actual: You are scrolled to a random blog post My overarching question is why any type of SPA is needed for a site like zeit.co?
- ifdefdebug 10y ago>But this is also about providing a better user experience. Breaking the behavior of my back button is one of the worst user experiences I get these days. Usually it makes me so angry that I just leave the site right away. > Rather than waiting for the HTML to be downloaded when a link is clicked, most of the UI can be displayed while a smaller payload is downloaded. Browsers can do that on their own since forever, given a carefully crafted HTML page. Of course there are use cases where that is not enough, needing some load-on-scroll mechanism or something like that, but it gets abused all the time for things a browser could handle so much better (with proper HTM of course) - blobs, newspaper articles etc.
- anupshinde 10y agoAwesome, took me like less than 10 minutes to create a basic server side newsreader app with React. Simplicity of PHP and power of React combined and brought to Node. I also like how the consolelog statements are shown in dev console
- TeeWEE 10y agoJavascript development on the web has become such a mess... Web apps are totally bloated, tons of javascript loaded, server side rendering for search engines. Mixing css HTML and javascript together to have a component framework that actually is run within javascript... Not within the browser engine... Its library on top of library on top of library.... Really..? W3C should come up with alternatives, that also work as mobile apps... The web has become an overengineered mess.
- oelmekki 10y agoI love the addition of async `getInitialProps` (more for being async than getting props, would be as fine for me as getInitialState). The logic for rendering loading screen in a component can quickly get tedious and annoying, such a pattern helps having a global loading screen and still allow the component to be responsible of how to fetch its data.
- jondubois 10y agoThis sounds great for static websites but I'm not sure if it's a good idea for a dynamic web app where data needs to update on the screen in realtime. Some questions which come to mind: What if you had a 'chatbox' component which updated every time a user wrote a message; would Next.js have to resend the entire HTML for the 'chatbox' component (containing the full message log) every time a message is added to that chatbox? Am I right to assume that only the affected component will be rerendered? Or the entire page has to be re-rendered (and the entire HTML of the page resent over the wire) for every change in data? It sounds like a nightmare for caching: If data is updated dynamically and you constantly have to rerender components in realtime on the serverside; you can't really cache every permutation of every component's HTML for every data change and for every user... That's insane. Regarding CPU, it sounds like it's going to eat up server-side performance and increase hosting costs massively! What, like 10 times 100 times? Are there any benchmarks done on performance for a typical single page app built with Next.js? Then there is the latency issue... Finally; if we move back to full server rendering and get rid of the need for client-side code; why would we want to stick to JavaScript? I haven't used it yet so please correct me if I'm misunderstanding something. Next.js sounds great for building static websites... But so does PHP!
- rockmeamedee 10y agoThe way it would work with your chat example is that Next.js would initially render the chatbox component on the server, then hand it over to the user's browser running the React component. Then the user's browser would subscribe to data updates, and would create/update/destroy components as needed as chat messages come in. The server only sends rendered components once, then the client handles the re-rendering afterwards. It's still a javascript client-side SPA, except the initial rendering is done by the server. You don't see a loading screen, google can crawl your page, and users can see an initial page with JS turned off). I hope that cleared things up a bit.
- deleted 10y ago[deleted]
- applepple 10y agoHow is this different from Meatier https://github.com/mattkrick/meatier https://github.com/mattkrick/meatier? Meatier also uses Babel, React and Node.js except that it has been around for almost a year and is already stable. They've already solved all the difficult issues like realtime pagination, authentication, GraphQL, etc...
- lucideer 10y agoI haven't really looked into meatier in great depth, so correct me if anything I say is a false assumption. Meatier, as the name suggests, seems to be fundamentally "meatier" than next.js. It's coming from the same monolithic mindset as Meteor, and despite leading with the intro "... but without the monolithic structure", the general architectural thinking still appears to reflect that. It makes a lot of decisions for you (express, rethinkdb, graphql, redux, etc. - it's production dependency list is gargantuan). You've phrased this as "they've already solved all the difficult issues", but many may see it as "they've removed a lot of choice and flexibility". It's a matter of perspective: the meatier docs do admit it's "overkill" for certain applications. Next.js, apart from the inclusion of glamor, seems to pretty much largely leave you to your own architectural and library preferences.
- applepple 10y agoEvery component in Meatier is replaceable. The defaults are for convenience. It sounds like Next.js also makes a lot of decisions for you.