Past And Present Of React, NextJS, And Web Technologies

why is nexjs so popular what is a new mental Paradigm Shift everyone is talking about is it another framework or it brings something new to the table to figure it out we are going back way back back to the beginning of the internet this gen is the internet World Wide Web was made possible by the series of JC early glider who basically said Hey what if you took landlines and instead of having horns connected to them it was computers I took the initiative in creating the internet internet on March 12 1899 Tim bernersley proposed A system that combined three ideas interconnected hypertext unique identifiers and the protocol for sharing information http Netscape a pioneering web browser company wants to add some magic to the web by making it more interactive there's an a brilliant engineer named Brendan Ike to create a scripting language that can bring web pages to life in just 10 days Brandon Ike works his code in visual tree and gives birth to JavaScript JavaScript quickly earned a reputation for being well a bit annoying it was often associated with those specific website elements that drove users crazy what's all that crap on the server side Technologies like PHP isp.net Ruby on Rails and Java server Pages gained popularity this server side scripting languages provided Dynamic content generation and database connectivity enabling the creation of more complex database applications back in 1999 something big happened it was called Ajax and it totally shook things up in the web world before Ajax whenever you wanted to get some fresh data from a web server you had to reload the whole page but Ajax gave browsers the ability to communicate with the server behind the scenes without making use it through a page reload nonetheless JavaScript was going through an existential crisis it wasn't sure if it wanted to be a respected programming language or just a fun little toy this cost a lot of chaos with different Frameworks like jQuery and moodle's battling it out for dominance meanwhile there was a growing demand for more advanced applications that could do all sorts of cool stuff the problem was developers were still relying heavily on server rendered technology this meant that as more features were added to the client side since started slowing down the Dom scripts in Era of vanilla JavaScript and jQuery eventually led to the lowest period of angularjs which eventually led to the creation of a library called react.js react introduced a groundbreaking concept where the view of your application became a function of its state to empower developers in describing the UI components from within the components itself react introduced jsx along with react we are shipping in embeddable XML syntax and we're calling that jsx everyone hated it everyone thought it was awful if you already know JavaScript and HTML which is common for web app developers you can learn jsx in just a few minutes it's a way to write code that's easy to understand and use unfortunately the simple Elegance of react often took a backseat to the overwhelming difficulties faced when trying to set up even the most basic application the problem is that at the end of the day most developers want everything just to work without tinkering with webpart configs and spending a week just to setting up a basic project after years of wondering in the wilderness create react app was created to make getting up and running as easy as possible use one command you would get a production ready react up no longer did you have to worry about entering this webpack yes lint or Bible this allowed you to focus on building your up rather than configuring it create react app was a huge blessing to the reactive system at that time but the problem was that angularjs and react were optimized for creating single page applications these Spas instead of making a request to the server every time a user visited a new page your application would load all the necessary HTML and CSS and JavaScript for your application on the initial request Spas tend to encourage large bundle sizes and if you are not careful this is especially problematic for users on slow internet connections or mobile devices additionally a space are not perfect for search engine optimization because you are relying on Google's ability to execute your JavaScript before it's able to parse the content of your page December 21 2020 react team introduced server components that run ahead of time and are excluded from your JavaScript bundle sure your components can run during the build letting you read from the file system or fetch static content they can also run on the server letting you access your data layer without having to build an API so you may be thinking while server components what are the advantages of using them over client components server components allow developers to better leverage server infrastructure for example you can move database into the server closer to your database and keep pledge the dependencies that previously would impact the client JavaScript bundle size on the server leading to improved performance server components make writing a react application feel similar to PHP or Ruby on Rails but with the power and flexibility of react and the components model for templating UI with server components the initial page slot is faster the client size JavaScript bundle size is reduced nexjs is the ultimate result of everything we have learned in the past 20 years of building for the web it combines the Simplicity of the earlier document era the strengths of server rendering the flexibility of react and the Smooths user experience of single page applications plus it minimizes the drawbacks that came with each era it's like a masterful blend of the best web development techniques creating a truly remarkable experience [Music]

Channel: PavlovTech

Views: 208

Keywords: nextjs, react, server components, javascript, history, web technologies, ssr, angular, jquery, mootools, seo, http, hypertext, html, css, jsx, next.js, ssg, rsc, react server components, web history, internet, spa, single page application, ajax, servers, facebook, js evolution

Id: y5tMU-WgVoQ

Length: 6min 44sec (404 seconds)

Published: Tue May 30 2023