رقصنده با کد (و غیره)

ویژگی‌های جدید Tailwind 2.2 #tailwind

آقا این tailwind هر چی میخونیم خفن‌تر میشه. فیچر جدید داده که دیگه css رو همون اولgenerate نمیکنه بلکه on-demand این کار رو میکنه. یعنی هر موقع خواستید یه کامپوننت رو ببینید همون موقع css رو براش میذاره. این یعنی عملا دیگه هیچ فایل css ای نه تنها موقع develop وجود نداره ، بلکه سمت client هم وجود نداره و علاوه بر کم شدن حجم پروژه ، سرعتش هم خیلی میره بالا. یه نکته دیگه : توضیح بالا معنیش این نیست که کل کتابخونش سمت کلاینت لود میشه. بلکه یه آپشن داره به نام purge ، قبل از اینکه پروژه سمت کاربر لود شه نگاه میکنه میبینه چیا استفاده شده ، فقط همونا رو لود میکنه. تقریبا تمام نیازهای یک پروژه کاملا بزرگ رو تامین میکنه. فقط اگر روزی روزگاری به نیازی رسیدید که Tailwind داخل خودش نداشت میتونید با استفاده از راهی که گذاشته استایل خودتونو بهش اضافه کنید تا با استایل شما هم مثل استایلای خودش رفتار کنه. این کتابخونه جایگزین css نیست ، بلکه مکمل خیلی خوبیه براش. حجت رو بر ما تکمیل کرد لعنتی. #tailwind

You must know CSS very well to use Tailwind #tailwind

Tailwind CSS Crash Course #tailwind #css

what is Tailwind? #tailwind #css

از Tailwind استفاده کنیم یا نکنیم؟ #tailwind

اضافه کردن TailwindCSS به NextJS از روی داکیومنت اصلیش داره آموزش میده : https://tailwindcss.com/docs/guides/nextjs نکته : به خاطر فیچر جدید Just-in-Time Mode دیگه فایل cssای تو devtools نمیبینید. #nextjs #tailwind

SSG without data + fetch data on client side = Client side rendering (only in nextjs) use SWR(React Hooks library for data fetching) in this approach. It's different from Client-Side-Rendering in create-react-app #nextjs

SSG with data vs SSG without data #nextjs

Next.js lets you choose which pre-rendering form to use for each page. #nextjs

توضیح انواع مخفف‌ها در حوزه طراحی وب و مخصوصا NextJS : Server-Side Rendering (SSR)‍‍‍ : Renders the app on the Server in response to each request, and then sends the hydrated HTML and Javascript back to the Client. Static Rendering (SR) - Static Site Generation (SSG) : Renders the app at build time. This is NextJS’s default approach. Incremental Static Regeneration (ISR) : Next.js allows you to create or update static pages after you’ve built your site and it enables you to use static-generation on a per-page basis, without needing to rebuild the entire site. Client-Side Rendering (CSR): Renders the app on the Client in the browser at run time. #nextjs

Two Forms of Pre-rendering #nextjs

Pre-rendering vs No Pre-rendering #nextjs

NextJS Hydration : By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO. Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. #nextjs

فرانت‌اند کارای محترم... کدومو ترجیح میدید؟ چرا؟

If you want to share something betweeen all different pages , import it in App component. (`_app` file) #nextjs

Next.js’s code splitting feature works on CSS Modules as well. It ensures the minimal amount of CSS is loaded for each page. #nextjs

next/head : The contents of head get cleared upon unmounting the component, so make sure each page completely defines what it needs in head, without making assumptions about what other pages added. #nextjs

next/image is an extension of the HTML <img> element, evolved for the modern web. ----- Next.js also has support for Image Optimization by default. This allows for resizing, optimizing, and serving images in modern formats like WebP when the browser supports it. This avoids shipping large images to devices with a smaller viewport. It also allows Next.js to automatically adopt future image formats and serve them to browsers that support those formats. ----- Automatic Image Optimization works with any image source. Even if the image is hosted by an external data source, like a CMS, it can still be optimized. ----- Instead of optimizing images at build time, Next.js optimizes images on-demand, as users request them. Images are lazy loaded by default. That means your page speed isn't penalized for images outside the viewport. Images load as they are scrolled into viewport. #nextjs

Next.js does code splitting automatically, so each page only loads what’s necessary for that page. That means when the homepage is rendered, the code for other pages is not served initially.